<template>
  <div style="height: 100%" v-loading="loading" :class="{'embed': $route.name === 'embedTrade'}">
    <div class="tabpane topcolor flexb">
      <div class="flex" style="white-space: nowrap">
        <a v-for="item in menu" :key="item.value"
        @click="handleMenuActive(item.value)"
        :class="{ 'active': item.value === active }" class="fontz colorHover">{{$t(`jy.${item.name}`)}}</a>
        <div class="resources" v-if="$appName === 'eosNewdex'">
          <eos-resource @listenEosResource="listenEosResource" />
        </div>
        <div class="resources" v-if="$appName === 'tronNewdex' && $store.state.app.scatter.identity">
          <tron-resource />
        </div>
      </div>
      <div class="flex">
        <!-- 跨链兑换 -->
        <!-- <div style="cursor: pointer; font-size: 14px; margin-right: 10px;"
          v-if="trad.b.name === 'EUSD'"
          @click="handleCurrencyExchange('EUSD')">
          <i class="iconfont icon-huaban23-copy-copy color333"></i>
          {{ $t('exchange.crossConv1') }}
        </div>
        <div style="cursor: pointer; font-size: 14px; margin-right: 10px;"
          v-else-if="trad.b.name === 'EBTC' || trad.a.name === 'EBTC'"
          @click="handleCurrencyExchange('EBTC')">
          <i class="iconfont icon-huaban23-copy-copy color333"></i>
          {{ $t('exchange.crossConv1') }}
        </div> -->
        <!-- <div style="cursor: pointer; font-size: 14px; margin-right: 10px;"
          v-else-if="trad.b.name === 'USDT' && trad.a.name !== 'USN' && trad.a.code !== 'issue.newdex'"
          @click="handleCurrencyExchange('USDT')">
          <i class="iconfont icon-huaban23-copy-copy color333"></i>
          {{ $t('exchange.exchangeUsdt') }}
        </div> -->
        <!-- 充提币 -->
        <div style="cursor: pointer; font-size: 14px; margin-right: 10px;white-space: nowrap"
          v-if="trad.b.name === 'USDT' && (trad.a.code === 'issue.newdex' || trad.a.code === 'eosio.token')
          && trad.b.code === 'issue.newdex'
          && $store.state.app.scatter.chain === 'eos'
          && trad.a.code !== 'danchortoken'"
          @click="handleOpenCharginChange">
          <i class="iconfont icon-huaban155 color333"></i>
          {{ $t('ct.ct83') }}
        </div>
        <!-- 生成USN -->
        <div class="usnCls flex"
          v-if="(trad.b.name === 'ZIG' || trad.b.name === 'USDE'
          || trad.b.name === 'EOSDT' || trad.b.name === 'USN')
          || (trad.b.name === 'USDT' && trad.a.name === 'USN')"
          @click="handleToWebsite">
          <i class="iconfont icon-dan" v-if="trad.a.name === 'USN' || trad.b.name === 'USN'"></i>
          <img v-else-if="$appName === 'eosNewdex' &&
            trad.a.code === 'eosio.token' &&
            trad.a.name.toLowerCase() === 'eos' &&
            trad.valuationCoinInfo.contract !== 'tethertether'"
            :src="`https://ndi.340wan.com/${trad.baseChain}/${trad.b.code}-${trad.b.name.toLowerCase()}.png`"
            alt="">
          <img v-else
            alt=""
            :src="$appName === 'eosNewdex' ?
            `https://ndi.340wan.com/${trad.baseChain}/${trad.a.code}-${trad.a.name.toLowerCase()}.png`
            : `https://ndi.340wan.com/${trad.baseChain}/${trad.a.name.toLowerCase()}.png`">
          {{ $t('public.generate', { coin : trad.b.name === 'USDT' && trad.a.name === 'USN' ? trad.a.name : trad.b.name}) }}
        </div>
        <!-- 免费CPU -->
        <div style="cursor: pointer; font-size: 14px; margin-right: 10px; color: #FF9800"
          class="hidden"
          v-if="$appName === 'eosNewdex'
          && cpuPercentOver
          && !(trad.b.name === 'EUSD' || (trad.b.name === 'EBTC' || trad.a.name === 'EBTC'))
          && $store.state.app.scatter.chain === 'eos'"
          @click="handleSelectMenu(3)">
          <i class="iconfont icon-CPU color333" style="font-size: 20px;
            vertical-align: middle;
            margin-top: -4px;
            display: inline-block;"></i>
          {{ $t('ndxStake.getCpu') }}
        </div>
        <div class="tools" v-if="$appName === 'eosNewdex'"
        style="padding-right: 10px;white-space: nowrap">
          <el-dropdown @command="handleSelectMenu" trigger="click" class="inline witerdropdown" placement="bottom">
            <span class="el-dropdown-link flex ml5" style="cursor: pointer;">
              <i class="iconfont icon-huaban14 color333" style="margin-right: 5px;"></i>
              {{ $t('public.tool') }}
              <i class="el-icon-arrow-down el-icon--right" style="margin-top: 3px;"></i>
            </span>
            <el-dropdown-menu slot="dropdown" style="text-align: center;">
              <template v-for="val in toolList">
                <el-dropdown-item :key="val.id"
                  :command="val.id"
                  class="toolListItem left"
                  :class="{'hidden': val.id === 3 && $store.state.app.scatter.chain !== 'eos'}">
                  <i class="iconfont color333" :class="`${val.icon}`"></i>
                  <span>{{ $t(`ndxStake.${val.name}`) }}</span>
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- 盈亏统计 -->
      <!-- <div class="flex" v-if="$appName === 'eosNewdex'">
        <div class="cozyTip" @click="handleShowProfit" v-if="!$store.state.app.scatter.identity">
          <i class="iconfont icon-huaban16"></i>
            {{$t('ndxStake.positionStatistics')}}
        </div>
        <el-popover placement="bottom" effect="light" trigger="click"
          v-model="showProfit" v-else>
          <div style="position: relative;">
            <div class="trasfStop flexc center" v-if="!trad.crossNoLink || trad.b.name !== 'EOS'">
              {{ $t('ndxStake.supportProfit1') }}
            </div>
            <profit :trad="trad" :showProfit="showProfit"/>
          </div>
          <div class="cozyTip" slot="reference" @click="handleShowProfit">
            <i class="iconfont icon-huaban16"></i>
              {{$t('ndxStake.positionStatistics')}}
          </div>
        </el-popover>
      </div> -->
    </div>
    <div class="jycenter" style="height: 88%">
      <!-- 现价/市价交易 -->
      <div class="flexb mrmcbox" style="height: 100%">
        <!-- 不同链交易出现蒙版 -->
        <div class="payMask flexc"
          v-if="$store.state.app.scatter.identity
          && $appName==='eosNewdex'
          && this.trad.crossNoLink
          && $store.state.app.scatter.chain !== this.trad.baseChain
          && $store.state.app.scatter.chain !== this.trad.valuationChain
          && symbolStatus.status === 0
          && symbolStatus.status !== 5">
          <div class="center">
            <p>{{$t('bosChain.tradeTip1')}}{{ trad.valuationChain.toUpperCase() }}{{$t('bosChain.tradeTip2')}}</p>
            <span @click="handleWalletPermission(trad.valuationChain)">{{$t('bosChain.changeAccount')}}</span>
          </div>
        </div>
        <!-- 买入 -->
        <div class="xjmrbox">
          <!-- 不同链交易出现蒙版 -->
          <div class="payMask flexc"
            v-if="$store.state.app.scatter.identity
            && !this.trad.crossNoLink
            && $store.state.app.scatter.chain !== this.trad.valuationChain
            && symbolStatus.status === 0">
            <div class="center">
              <p>{{$t('bosChain.tradeTip1')}}{{ trad.valuationChain.toUpperCase() }}{{$t('bosChain.tradeTip2')}}</p>
              <span @click="handleWalletPermission(trad.valuationChain)">{{$t('bosChain.changeAccount')}}</span>
            </div>
          </div>
          <el-form ref="xjFormMr" :model="xjFormMr"
          label-width="70px" size="mini">
            <!-- 余额 -->
            <div class="flexb mb right">
              <span class="color-lv fontz"
              style="min-width: 120px; text-align: left; padding-left: 16px;">{{$t('jy.purchase')}} {{trad.a.name}}</span>
              <span class="fontx" v-if="trad.a.balanceFamt && $store.state.app.scatter && $store.state.app.scatter.identity"
              @click="handleMrPesentInput(100)">{{$t('jy.balance')}} {{trad.a.balanceFamt}}</span>
              <span class="fontx" v-if="!trad.a.balanceFamt && $store.state.app.scatter && $store.state.app.scatter.identity"
              @click="handleMrPesentInput(100)">{{$t('jy.balance')}} <i class="el-icon-refresh el-icon-loading"></i> {{ trad.b.name }}</span>
            </div>

            <!-- 限/市价 价格-->
            <el-form-item :label="$t('jy.purchasep')">
              <el-input v-model="xjFormMr.price" type="number" v-if="!active" clearable
              @blur="handleFormatNumber(1.1)"
              @input="handleMrPriceInput"
              :step="stepFormat(trad.priceDecimal)" :min="stepFormat(trad.priceDecimal)" title="">
                <span slot="suffix">{{trad.b.name}}</span>
              </el-input>
              <!-- 市价 价格-->
              <el-input v-if="active" :value="$t('jy.ysczyjgmr')" :placeholder="$t('jy.ysczyjgmr')" disabled>
                <span slot="suffix">{{trad.b.name}}</span>
              </el-input>
            </el-form-item>

            <!-- 买入 限价 数量-->
            <el-form-item :label="$t('jy.purchasen')" style="margin-bottom: 0px"
            :class="{'is-error-number' : buyNumberLimit}"
            class="limitPriceNumber"
            v-if="!active">
              <el-input v-model="xjFormMr.number" type="number" clearable
              @input="handleMrNumberInput"
              @blur="handleFormatNumber(1)"
              :step="stepFormat(trad.coinDecimal)" :min="stepFormat(trad.coinDecimal)" title="">
                <span slot="suffix">{{trad.a.name}}</span>
              </el-input>
              <el-popover
                placement="bottom"
                trigger="click"
                :width="$store.state.app.language === 'en' ? 480 : 440">
                <div class="formula">
                  <p>{{ $t('jy.entrustedPrompt') }}</p>
                  <div class="flex formulaContent">
                    <span class="ramPrice" :style="$store.state.app.language === 'en' ? 'flex: 5;-ms-flex: 5;-webkit-box-flex: 5;' : ''">
                      {{ $t('jy.actualNumber') }}
                    </span>
                    <span class="ramSign"
                      :style="$store.state.app.language === 'en' ? 'flex: 0.6;-ms-flex: 0.6;-webkit-box-flex: 0.6;' : ''">
                      =
                    </span>
                    <div class="flex center">
                      <span>{{ $t('jy.receivedByContract', { code: trad.b.name }) }}</span>
                      <span>{{ $t('jy.purchasep') }}</span>
                      <em :style="$store.state.app.language === 'en' ? 'width: 254px;' : 'width: 216px;'"></em>
                    </div>
                  </div>
                </div>
                <div class="formulaTip" slot="reference"
                  :style="$store.state.app.language === 'ko' || $store.state.app.language === 'en' ? 'left: -28px;' : ''">
                  <span slot="reference" class="iconfont icon-huaban"></span>
                </div>
              </el-popover>
              <!-- <div class="el-form-item__error"> ≥ {{buyNumberLimit}} {{trad.a.name}}</div> -->
            </el-form-item>

            <!-- 市价 交易额-->
            <el-form-item :label="$t('jy.jyed')"
            class="hideArrow"
            style="margin-bottom: 5px"
            v-if="active"
            :class="{'is-error' : sjmr_sjmoney_iserror}">
              <el-input v-model="xjFormMr.sjmoney" type="number" clearable
              @blur="handleFormatNumber(3)"
              step="0.0001" min="0.0001" title="">
                <span slot="suffix">{{trad.b.name}}</span>
              </el-input>
              <div class="el-form-item__error"> ≥ {{min_exchang_money}} {{trad.b.name}}</div>
            </el-form-item>

            <!-- 限/市价 百分比-->
            <el-form-item style="margin-bottom: 5px">
              <div class="block elsildebox">
                <el-slider :format-tooltip="formatTooltip"
                  v-model="mrpesent"
                  :step="1"
                  @change="handleMrPesentInput">
                </el-slider>
                <div class="el-slider__stop" @click="handleMrPesentInput(0)" style="left: 0%;"></div>
                <div class="el-slider__stop" @click="handleMrPesentInput(25)" style="left: 25%;"></div>
                <div class="el-slider__stop" @click="handleMrPesentInput(50)" style="left: 50%;"></div>
                <div class="el-slider__stop" @click="handleMrPesentInput(75)" style="left: 75%;"></div>
                <div class="el-slider__stop" @click="handleMrPesentInput(100)" style="left: 100%;"></div>
              </div>
              <div class="flexb pesentNumber">
                <span style="margin: 0 7px 0 -5px;">0%</span>
                <span style="margin-left:5px">25%</span>
                <span style="margin-left:15px">50%</span>
                <span style="margin-right:-5px">75%</span>
                <span>100%</span>
              </div>
            </el-form-item>

            <!-- 限价 交易额 -->
            <el-form-item :label="$t('jy.jyed')" v-if="!active" :class="{'is-error' : xjmr_money_iserror}">
              <el-input v-model="xjFormMr.money"
              clearable
              @input="handleMrMoenyInput"
              @blur="handleFormatNumber(1.2)">
                <span slot="suffix">{{trad.b.name}}</span>
              </el-input>
              <div class="el-form-item__error"> ≥ {{min_exchang_money}} {{trad.b.name}}</div>
            </el-form-item>
            <!-- 买入 接收账户 -->
            <el-form-item class="addressBookCls" :label="$t('bosChain.receiveAccount1')" v-if="!trad.crossNoLink">
              <el-input
              clearable
              :placeholder="$t('jy.fillInAccount', {account: trad.baseChain.toUpperCase()})"
               v-model="xjFormMr.recipient"
               class="receiveAccount">
                <span slot="suffix" class="iconfont icon-huaban212" @click="handleCheckAddress(trad.a.name.toLowerCase())"></span>
              </el-input>
              <div v-if="sjmr_getaccount_iserror"
              class="el-form-item__error el-form-item_account_error">{{ $t('bosChain.accountNone', {chain: trad.baseChain.toUpperCase()}) }}</div>
            </el-form-item>
            <!-- 免费cpu挂单 -->
            <el-form-item v-if="$store.state.app.scatter.chain === 'eos'
            && trad.valuationChain === 'eos'
            && $store.state.app.scatter.by !== 'mobileWallet'
            && !sjmr_getaccount_iserror">
              <div class="freeCpu flex" :style="$store.state.app.language === 'en' ? 'line-height: 15px;' : 'line-height: 10px;'">
                <el-checkbox v-model="freeCpuChecked" :style="$store.state.app.language === 'en' ? 'margin-top: -2px;' :''"
                  :disabled="user && !user.remainFreeOrderCount"></el-checkbox>
                <free-cpu
                  @listenFreeCpu="handleFreeCpu"
                  :levelRuleNum="levelRuleNum"
                  :user= "user" />
              </div>
            </el-form-item>
            <!-- 限/市价 买入-->
            <el-form-item
            :style="active ? 'margin-top: 20px' : ''" style="margin-bottom: 0; margin-top: 15px">
              <div slot="label" class="vip-box">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <div class="center mediumLatency"
                  v-if="user && user.level">
                    {{$t('ndxStake.classMember1')}} {{user.level}}
                    {{$t('ndxStake.classMember2')}}{{$t('ndxStake.classMember3')}}
                    <span v-if="$store.state.app.language === 'zh-CN'" style="margin-right: -3px;">
                      {{ Number(this.handleAccMul(user.discountRate, 10)) || 0 }} 折
                    </span>
                    <span v-if="$store.state.app.language !== 'zh-CN'">
                      {{ 100 - Number(this.handleAccMul(user.discountRate, 100)) || 0 }}%
                    </span>{{$t('ndxStake.classMember4')}}
                  </div>
                  <div v-else class="center"><a @click="handleToNoLoggedMember"
                  class="mediumLatency">{{$t('ndxStake.openMember3')}}</a>{{$t('ndxStake.openMember2')}}</div>
                  <div slot="reference" @click="handleToNoLoggedMember" style="cursor: pointer;" v-if="$appName === 'eosNewdex'">
                    <img v-if="user && user.level"
                    :src="handleGetVipLogo()" alt="">
                    <i v-else
                      class="iconfont icon-v gray"
                      style="font-size: 17px;"></i>
                  </div>
                </el-popover>
              </div>
              <!-- 下单 -->
              <div>
                <!-- 同链交易 -->
                <el-button class="mrbtn" :loading="xjFormMr.submitLoading"
                v-if="$store.state.app.scatter.identity
                && $store.state.app.scatter.chain === this.trad.baseChain
                && this.trad.crossNoLink"
                @click="handleSubmitDeal(1)">
                {{ xjFormMr.submitLoading ? $t('jy.purchaseIng') : $t('jy.purchase') }}</el-button>
                <!-- 跨链交易 -->
                <el-button class="mrbtn" :loading="xjFormMr.submitLoading"
                v-else-if="$store.state.app.scatter.identity
                && !this.trad.crossNoLink
                && $store.state.app.scatter.chain === this.trad.valuationChain"
                @click="handleSubmitDeal(1)">
                {{ xjFormMr.submitLoading ? $t('jy.purchaseIng') : $t('jy.purchase') }}</el-button>
                <el-button class="mrbtn" v-else>
                  <span class="color-fff" @click="handleWalletPermission(trad.valuationChain)">
                    {{$t('wallet.wpromis')}}</span>
                    <!-- {{$t('wallet.wpromis', {chain: this.trad.valuationChain.toUpperCase()})}}</span> -->
                </el-button>
              </div>
            </el-form-item>
          </el-form>
          <div class="exchangeTis riskTip fr" v-if="trad.riskStatus" @click="handleRiskTip">
            {{$t('public.riskAlertCaption')}}
            <span class="iconfont icon-jiaoyizanting fl mr5"></span>
          </div>
          <div class="exchangeTis" v-if="(trad.a.name==='LUCKY' || trad.a.name==='SOV') && !trad.riskStatus">
            &nbsp;
          </div>
          <div class="exchangeTis" v-if="trad.a.name==='MARF'">
            {{$t('jy.buyRule', {coin: 'MARF'})}}
            <el-popover trigger="hover">
              <div style="max-width: 300px">
                <!-- <p style="margin-bottom: 8px;">{{$t('jy.sovDetail2')}}</p> -->
                <p>{{$t('jy.coinFeiyong', {coin: 'MARF', money: '1%'} )}}</p>
              </div>
              <span slot="reference" class="iconfont icon-huaban"></span>
            </el-popover>
          </div>
        </div>

        <!-- 卖出 -->
        <div class="xjmcbox">
          <a :href="tradeSlowUrl[$store.state.app.language]"
          class="tradeSlowUrl" v-if="$appName === 'tronNewdex'"
          target="_blank">{{ $t('public.tradeSlowUrl') }}</a>
          <!-- 不同链交易出现蒙版 -->
          <div class="payMask flexc"
            v-if="$store.state.app.scatter.identity
            && !this.trad.crossNoLink
            && $store.state.app.scatter.chain !== this.trad.baseChain
            && symbolStatus.status === 0">
            <div class="center">
              <p>{{$t('bosChain.tradeTip1')}}{{ trad.baseChain.toUpperCase() }}{{$t('bosChain.tradeTip2')}}</p>
              <span @click="handleWalletPermission(trad.baseChain)">{{$t('bosChain.changeAccount')}}</span>
            </div>
          </div>
          <el-form ref="xjFormMc" :model="xjFormMc"
          label-width="80px" size="mini">

            <!-- 余额 -->
            <div class="flexb mb right">
              <span class="color-ho fontz"
              style="min-width: 120px; text-align: left; padding-left: 26px;">{{$t('jy.sellOut')}} {{trad.a.name}}</span>
              <span class="fontx"
              v-if="trad.b.balanceFamt && $store.state.app.scatter && $store.state.app.scatter.identity" @click="handleMcPesentInput(100)">
              {{$t('jy.balance')}} {{trad.b.balanceFamt}}</span>
              <span class="fontx"
              v-if="!trad.b.balanceFamt && $store.state.app.scatter && $store.state.app.scatter.identity"
              @click="handleMcPesentInput(100)">{{$t('jy.balance')}} <i class="el-icon-refresh el-icon-loading"></i> {{ trad.a.name }}</span>
            </div>

            <!-- 限/市价 价格-->
            <el-form-item :label="$t('jy.sellOutp')">
              <el-input v-model="xjFormMc.price" type="number" v-if="!active"
              clearable
              @blur="handleFormatNumber(2.1)"
              @input="handleMcPriceInput"
              :step="stepFormat(trad.priceDecimal)" :min="stepFormat(trad.priceDecimal)" title="">
                <span slot="suffix">{{trad.b.name}}</span>
              </el-input>
              <!-- 市价 价格-->
              <el-input v-if="active" :value="$t('jy.ysczyjgmc')" :placeholder="$t('jy.ysczyjgmc')" disabled>
                <span slot="suffix">{{trad.b.name}}</span>
              </el-input>
            </el-form-item>

            <!-- 限/市价 数量-->
            <el-form-item class="relative limitPriceNumber"
            :class="{'is-error' : sjmc_number_iserror, 'remindbox' : procedures}"
            :label="$t('jy.sellOutn')" style="margin-bottom: 0px">
              <el-input v-model="xjFormMc.number" type="number"
              clearable
              @blur="handleFormatNumber(2)"
              @input="handleMcNumberInput"
              :step="stepFormat(trad.coinDecimal)" :min="stepFormat(trad.coinDecimal)" title="">
                <span slot="suffix">{{trad.a.name}}</span>
                <!-- <span slot="suffix"
                  class="fl icon-jiaoyitingzhi iconfont iconNumber"
                  style="margin-right: 5px;"
                  @click="handleCancelMcNum"
                  v-if="showCancelMcNum && !active" ></span> -->
              </el-input>
              <div class="el-form-item__error"> ≥ {{min_xjmc_number}} {{trad.a.name}}</div>
              <div class="remind">
                {{$t('jy.remind')}}
                <i @click="procedures = false">×</i>
              </div>
            </el-form-item>

            <!-- 限/市价 百分比 -->
            <el-form-item style="margin-bottom: 5px">
              <div class="block elsildebox">
                <el-slider :format-tooltip="formatTooltip"
                  v-model="mcpesent"
                  @change="handleMcPesentInput"
                  :step="1">
                </el-slider>
                <div class="el-slider__stop" @click="handleMcPesentInput(0)" style="left: 0%;"></div>
                <div class="el-slider__stop" @click="handleMcPesentInput(25)" style="left: 25%;"></div>
                <div class="el-slider__stop" @click="handleMcPesentInput(50)" style="left: 50%;"></div>
                <div class="el-slider__stop" @click="handleMcPesentInput(75)" style="left: 75%;"></div>
                <div class="el-slider__stop" @click="handleMcPesentInput(100)" style="left: 100%;"></div>
                <div class="flexb pesentNumber">
                  <span style="margin: 0 7px 0 -5px;">0%</span>
                  <span style="margin-left:5px">25%</span>
                  <span style="margin-left:15px">50%</span>
                  <span style="margin-right:-5px">75%</span>
                  <span>100%</span>
                </div>
              </div>
            </el-form-item>

            <!-- 限价 交易额-->
            <el-form-item :label="$t('jy.jyed')" v-if="!active" :class="{'is-error' : xjmc_money_iserror}">
              <el-input v-model="xjFormMc.money"
              clearable
              @blur="handleFormatNumber(2.2)"
              @input="handleMcMoenyInput">
                <span slot="suffix">{{trad.b.name}}</span>
              </el-input>
              <div class="el-form-item__error"> ≥ {{min_exchang_money}} {{trad.b.name}}</div>
            </el-form-item>

            <!-- 卖出 接收账户 -->
            <el-form-item  class="addressBookCls" :label="$t('bosChain.receiveAccount1')" v-if="!this.trad.crossNoLink">
              <el-input :placeholder="`${$t('jy.fillInAccount', {account:'EOS'})}`"
              clearable
              v-model="xjFormMc.recipient"
              class="receiveAccount">
                <span slot="suffix" class="iconfont icon-huaban212" @click="handleCheckAddress('eos')"></span>
              </el-input>
              <div v-if="sjmc_getaccount_iserror"
              class="el-form-item__error el-form-item_account_error">{{$t('bosChain.accountNone', {chain: 'EOS'})}}</div>
            </el-form-item>
            <!-- 免费cpu挂单 -->
            <el-form-item v-if="$store.state.app.scatter.chain === 'eos'
            && trad.valuationChain === 'eos'
            && $store.state.app.scatter.by !== 'mobileWallet'
            && !sjmc_getaccount_iserror">
              <div class="freeCpu flex" :style="$store.state.app.language === 'en' ? 'line-height: 15px;' : 'line-height: 10px;'">
                <el-checkbox v-model="freeCpuChecked" :style="$store.state.app.language === 'en' ? 'margin-top: -2px;' :''"
                  :disabled="user && !user.remainFreeOrderCount"></el-checkbox>
                <free-cpu
                  @listenFreeCpu="handleFreeCpu"
                  :levelRuleNum="levelRuleNum"
                  :user= "user" />
              </div>
            </el-form-item>
            <!-- 限/市价 卖出 -->
            <el-form-item :style="active ? 'margin-top: 20px' : ''" style="margin-bottom: 0; margin-top: 15px">
              <div slot="label" class="vip-box">
                <el-popover
                  placement="bottom"
                  trigger="hover">
                  <div class="center mediumLatency"
                  v-if="user && user.level">
                    {{$t('ndxStake.classMember1')}} {{user.level}}
                    {{$t('ndxStake.classMember2')}}{{$t('ndxStake.classMember3')}}
                    <span v-if="$store.state.app.language === 'zh-CN'" style="margin-right: -3px;">
                      {{ Number(this.handleAccMul(user.discountRate, 10)) || 0 }} 折
                    </span>
                    <span v-if="$store.state.app.language !== 'zh-CN'">
                      {{ 100 - Number(this.handleAccMul(user.discountRate, 100)) || 0 }}%
                    </span>
                    {{$t('ndxStake.classMember4')}}
                  </div>
                  <div v-else class="center"><a @click="handleToNoLoggedMember"
                  class="mediumLatency">{{$t('ndxStake.openMember3')}}</a>{{$t('ndxStake.openMember2')}}</div>
                  <div slot="reference" @click="handleToNoLoggedMember" style="cursor: pointer;" v-if="$appName === 'eosNewdex'">
                    <img v-if="user && user.level"
                    :src="handleGetVipLogo()" alt="">
                    <i v-else
                      class="iconfont icon-v gray"
                      style="font-size: 17px;"></i>
                  </div>
                </el-popover>
              </div>
              <div>
                <!-- 同链交易 -->
                <el-button class="mcbtn" :loading="xjFormMc.submitLoading"
                v-if="$store.state.app.scatter.identity
                && $store.state.app.scatter.chain === this.trad.baseChain
                && this.trad.crossNoLink"
                @click="handleSubmitDeal(2)">
                {{ xjFormMc.submitLoading ? $t('jy.sellOuting') : $t('jy.sellOut') }}</el-button>
                <!-- 跨链交易 -->
                <el-button class="mcbtn" :loading="xjFormMc.submitLoading"
                v-else-if="$store.state.app.scatter.identity
                && !this.trad.crossNoLink
                && $store.state.app.scatter.chain === this.trad.baseChain"
                @click="handleSubmitDeal(2)">
                {{ xjFormMc.submitLoading ? $t('jy.sellOuting') : $t('jy.sellOut') }}</el-button>
                <el-button class="mcbtn" v-else>
                  <span class="color-fff" @click="handleWalletPermission(trad.baseChain)">
                    {{$t('wallet.wpromis')}}</span>
                </el-button>
              </div>
            </el-form-item>
          </el-form>
          <!-- <div class="exchangeTis" v-if="trad.a.name==='IQ'">
            {{$t('jy.bimsg')}}
            <el-popover trigger="hover">
              <div style="max-width: 300px">
                <p>{{$t('jy.bimsgDetail1')}}</p>
                <p>{{$t('jy.bimsgDetail2')}}</p>
              </div>
              <span slot="reference" class="iconfont icon-huaban"></span>
            </el-popover>
          </div> -->
          <div class="exchangeTis" v-if="trad.a.name==='SOV'">
            {{$t('jy.sovDetail1', {coin: 'SOV'})}}
            <el-popover trigger="hover">
              <div style="max-width: 300px">
                <p style="margin-bottom: 8px;">{{$t('jy.sovDetail2')}}</p>
                <p>{{$t('jy.sovDetail3')}}</p>
              </div>
              <span slot="reference" class="iconfont icon-huaban"></span>
            </el-popover>
          </div>
          <div class="exchangeTis" v-if="trad.a.name==='MARF'">
            {{$t('jy.sellRule', {coin: 'MARF'})}}
            <el-popover trigger="hover">
              <div style="max-width: 300px">
                <!-- <p style="margin-bottom: 8px;">{{$t('jy.sovDetail2')}}</p> -->
                <p>{{$t('jy.coinFeiyong', {coin: 'MARF', money: '1%'} )}}</p>
              </div>
              <span slot="reference" class="iconfont icon-huaban"></span>
            </el-popover>
          </div>
          <div class="exchangeTis riskTip fr" v-if="trad.riskStatus" @click="handleRiskTip">
            {{$t('public.riskAlertCaption')}}
            <span class="iconfont icon-jiaoyizanting fl mr5"></span>
          </div>
          <div class="exchangeTis" v-if="trad.a.name==='LUCKY' && !trad.riskStatus">
            {{$t('jy.luckyTip')}}
          </div>
        </div>
      </div>

      <!-- 交易对状态-->
      <div class="trasfStop flexc center"
      :class="{'opensell flexb' : symbolStatus.status === 5, 'w100' :
       $store.state.app.scatter.identity
       && this.trad.crossNoLink
       && $store.state.app.scatter.chain !== this.trad.baseChain
       && $store.state.app.scatter.chain !== this.trad.valuationChain}"
      v-if="symbolStatus.status!==0 && symbolStatus.status!==10">
        <!-- status: 0, // 交易对状态(0-上架，1-暂停，2-下架中，3-下架，4-待上架，5-即将上架，10-新币) -->
        <div v-if="symbolStatus.status===1">
          <div class="color-yellow">
            <i class="iconfont icon-jiaoyizanting"></i>
            <p>{{$t('jy.transStop')}}</p>
          </div>
          <p>{{$t('jy.transStopNews1')}}</p>
          <p>{{$t('jy.transStopNews2')}}</p>
          <p>{{$t('jy.transStopNews3')}}</p>
          <a v-if="symbolStatus.noticeUrl"
          :href="symbolStatus.noticeUrl" target="_blank" class="colorThis">{{$t('public.lookDetail')}}</a>
        </div>
        <div v-if="symbolStatus.status===2">
          <div class="color-yellow">
            <i class="iconfont icon-jiaoyizanting"></i>
            <p>{{$t('jy.symbolOver')}}</p>
          </div>
          <p>{{$t('jy.symbolOverNews')}}</p>
          <p>{{$t('jy.symbolOverNews0')}} {{symbolStatus.closeTime | dateFormatBIH}} {{handleGetTimeGMT()}}{{$t('jy.symbolOverNews1')}}</p>
          <a v-if="symbolStatus.noticeUrl"
          :href="symbolStatus.noticeUrl" target="_blank" class="colorThis">{{$t('public.lookDetail')}}</a>
        </div>
        <div v-if="symbolStatus.status===3">
          <div class="color-red">
            <i class="iconfont icon-jiaoyitingzhi"></i>
            <p>{{$t('jy.transDown')}}</p>
          </div>
          <p>{{$t('jy.transDownNews1')}} {{symbolStatus.closeTime | dateFormatBIH}} {{handleGetTimeGMT()}}{{$t('jy.transDownNews2')}}</p>
          <p>{{$t('jy.transDownNews3')}}</p>
          <a v-if="symbolStatus.noticeUrl"
          :href="symbolStatus.noticeUrl" target="_blank" class="colorThis">{{$t('public.lookDetail')}}</a>
          <a v-if="trad.a.name === 'EOSDT'"
          @click="handleToTrade"
          style="padding-top: 65px;font-size: 15px; display:inline-block" class="colorThis">
            {{$t('jy.lookNewSymbel')}}
            EOS/EOSDT >
          </a>
        </div>
        <div class="opencudown" v-if="symbolStatus.status === 5">
          <div class="color-yellow" style="margin-bottom: 0; color: #67C269 !important;"> {{$t('jy.jjkfjy')}} </div>
          <p class="mb pb" style="font-size: 16px">{{symbolStatus.openTime | dateFormatBIH}}</p>
          <p class="mt pt" style="font-size: 30px; padding-top: 0 !important;">{{cDate.hours}}:{{cDate.minutes}}:{{cDate.seconds}}</p>
          <p style="font-size: 16px">{{$t('jy.daojishi')}}</p>
        </div>
        <div class="hasopensell" v-if="symbolStatus.status === 5
          && $store.state.app.scatter.identity
          && this.trad.crossNoLink
          && $store.state.app.scatter.chain !== this.trad.baseChain
          && $store.state.app.scatter.chain !== this.trad.valuationChain">
          <div class="line-bottom"></div>
          <div class="color-ho" style="font-size: 16px;"> {{$t('jy.ykfmc')}} </div>
          <div class="mb pb">
            <p style="font-size: 16px">{{$t('bosChain.tradeTip1')}}{{ trad.valuationChain.toUpperCase() }}{{$t('bosChain.tradeTip2')}}</p>
            <span @click="handleWalletPermission(trad.valuationChain)">{{$t('bosChain.changeAccount')}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 首次下单验证 -->
    <el-dialog
      title="Newdex"
      :close-on-click-modal="true"
      :visible.sync="orderRequery"
      width="620px">
      <Agreement @listenAgree="handleListenAgree"
      :embed="embed" />
    </el-dialog>

    <!-- 币种风险提示 -->
    <el-dialog
      class="riskHintsbox"
      :title="$t('public.riskAlertCaption')"
      :show-close= 'true'
      :close-on-click-modal="false"
      :visible.sync="riskHintsVisible"
      :width="$store.state.app.language === 'en' ? '800px' : '750px'">
      <risk-hints
        @listenRisk="handleListenRisk"
        :symbolRisk = "symbolRisk"
        :riskTipBoolean = "riskTipBoolean"/>
    </el-dialog>

    <!-- 扫码交易 -->
    <el-dialog
      class="dialogPay"
      :close-on-click-modal="true"
      :visible.sync="tradingPay"
      width="550px"
      center>
      <div class="mainView-dialog">
        <div class="iconfont logoicon icon-icon-test-copy-copy dialog-logo"></div>
        <p>{{$t('wallet.smjy')}}</p>
        <!-- 钱包登录二维码 -->
        <div class="walletCode">
          <div class="codebox" v-loading="loadingCode">
            <canvas id="payCode"></canvas>
            <img class="logocode" :src="handleGetWalletLogo()">
            <div class="overdueCode flexc" v-if="overdueCode">
              <span style="color: #999">{{$t('wallet.codeover')}}
              <a @click="handleNewTransferCode">{{$t('wallet.shuaxin')}}</a></span>
            </div>
          </div>
        </div>
        <div class="gray">{{$t('wallet.eosname')}}</div>
        <div class="accountName">{{order.account}}</div>
        <div class="tipOut flexc">
          <div class="tip">
            <!-- 买入 -->
            <div class="tipContent" v-if="forOrderWay === 1">
              <p class="buyCurrency color-lv">{{$t('jy.purchase')}} {{trad.a.name}}</p>
              <p v-if="active === 0">{{ $t('jy.purchasep') }}：{{xjFormMr.price}} {{trad.b.name}}</p>
              <p v-if="active === 0">{{ $t('jy.purchasen') }}：{{xjFormMr.number}} {{trad.a.name}}</p>
              <p v-if="active === 0">{{ $t('jy.jyed') }}：{{xjFormMr.money}} {{trad.b.name}}</p>
              <p v-if="active === 1">{{ $t('jy.jyed') }}：{{xjFormMr.sjmoney}} {{trad.b.name}}</p>
            </div>
            <!-- 卖出 -->
            <div class="tipContent" v-if="forOrderWay === 2">
              <p class="buyCurrency color-ho">{{$t('jy.sellOut')}} {{trad.a.name}}</p>
              <p v-if="active === 0">{{ $t('jy.sellOutp') }}：{{xjFormMc.price}} {{trad.b.name}}</p>
              <p>{{ $t('jy.sellOutn') }}：{{xjFormMc.number}} {{trad.a.name}}</p>
              <p v-if="active === 0">{{ $t('jy.jyed') }}：{{xjFormMc.money}} {{trad.b.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 侧链下单温馨提示 -->
    <el-dialog
      class="cozyTipBox"
      :close-on-click-modal="false"
      :visible.sync="cozyTipVisible"
      width="750px">
      <div class="scatter">
        <div class="tip color-f">{{$t('bosChain.tipNewdexTitle')}}</div>
        <p>
          <template v-if="forOrderWay === 2">
            {{$t('bosChain.receiveAccountName', {chain: 'EOS'})}}
          </template>
          <template v-else>
            {{$t('bosChain.receiveAccountName', {chain: trad.baseChain})}}
          </template>
          : {{ cozyTipRecipient }}</p>
        <p>{{$t('bosChain.receiverSureTip')}}</p>
        <div class="tip riskAlertCheck">
          <el-checkbox v-model="tipChecked">{{$t('bosChain.noAgain')}}</el-checkbox>
        </div>
        <div class="tip" style="margin-bottom: 10px;">
          <el-button class="btn" type="primary" @click="handleCozyTipSure">{{$t('bosChain.sureTrade')}}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- USDS下卖单 温馨提示 -->
    <el-dialog
      class="cozyTipBox"
      :close-on-click-modal="false"
      :visible.sync="usdsTipBox"
      width="440px">
      <div class="scatter">
        <div class="tip color-f">{{$t('bosChain.tipNewdexTitle')}}</div>
        <p>{{$t('jy.areYouSure')}}</p>
        <div class="tip riskAlertCheck">
          <el-checkbox v-model="usdsChecked">{{$t('bosChain.noAgain')}}</el-checkbox>
        </div>
        <div class="tip" style="margin-bottom: 10px;">
          <el-button class="btn" type="primary" @click="handleUsdsTipSure">{{$t('public.sure')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 币种兑换弹窗 -->
    <el-dialog
      class="currencyExchange"
      :visible.sync="currencyExchangeVisible"
      width="430px"
      :close-on-click-modal="false"
      center>
      <currency-exchange
      @listenCurrencyExchange="listenCurrencyExchange"
      :convert="convert"
      :currencyExchangeVisible="currencyExchangeVisible"/>
    </el-dialog>
    <!-- 兑换USDT -->
    <el-dialog
      class="currencyExchange"
      :visible.sync="usdtCurrencyExchangeVisible"
      width="430px"
      :close-on-click-modal="false"
      center>
      <usdt-currency-exchange
      @listenUsdtCurrencyExchange="listenUsdtCurrencyExchange"
      :convert="convert"
      :usdtCurrencyExchangeVisible="usdtCurrencyExchangeVisible"/>
    </el-dialog>
    <!-- 盈亏统计弹窗 -->
    <el-dialog
      class="currencyExchange1"
      :visible.sync="showProfit"
      :title="$t('ndxStake.positionStatistics')"
      width="560px"
      :close-on-click-modal="false"
      center>
      <profit
        :trad="trad"
        :showProfit="showProfit"/>
    </el-dialog>
    <!-- 行情提醒设置 -->
    <el-dialog
      class="remindSet"
      :show-close="true"
      :close-on-click-modal="false"
      :visible.sync="remindSetVisible"
      width="750px">
      <remind-set
        :remindSetStatus="remindSetStatus"
        :contract="trad.a.code"
        :symbolId="trad.id"
        :symbol="trad.symbol"
        :remindSetVisible="remindSetVisible"
        :symbolPrice="priceData && priceData.price
        ? toFixed(toNonExponential(priceData.price), trad.priceDecimal).toString() : toFixed(0, trad.priceDecimal).toString()"
        :priceDecimal="trad.priceDecimal"
        @listenRemind="handleRemind"/>
    </el-dialog>
    <!-- 温馨提示 请使用叶子钱包-->
    <div v-if="tipsUseScatter">
      <tips :showBtn="false"
        :text="$t('public.noLeafTip1')"
        :text1="$t('public.noLeafTip2')"
        :width="460"
        @listenTips="(() => {tipsUseScatter=false})" />
    </div>
    <!-- 充、提币弹窗 -->
    <el-dialog
      class="currencyExchange"
      :visible.sync="coinChargingVisible"
      width="500px"
      :close-on-click-modal="false"
      center>
      <coin-charging
      @listenCoinChargingVisible="handleCoinChargingVisible"
      :coinChargingVisible="coinChargingVisible"
      :coin="coin"
      :coinChargingWay="coinChargingWay"/>
    </el-dialog>
    <!-- 充提选择 -->
    <el-dialog
      class="currencyExchange1"
      :title="$t('ct.ct32')"
      center
      :visible.sync="charginChangeVisible"
      width="370px"
      append-to-body>
      <chargin-change @listenCharginChange="handleCharginChange"/>
    </el-dialog>
    <!-- 充提币服务暂停 -->
    <el-dialog
      class="currencyExchange"
      center
      :visible.sync="withdrawDialogVisible"
      width="370px"
      append-to-body>
      <withdraw-dialog @listenWithdrawDialog="withdrawDialogVisible = false;"/>
    </el-dialog>
    <!-- 地址簿 -->
    <el-dialog
      class="currencyExchange addressDialog"
      :title="$t('address.ls1')"
      center
      :visible.sync="addressBookVisible"
      width="400px"
      append-to-body>
      <address-book
      :addressBookVisible="addressBookVisible"
      @listenAddressBook="handleAddressBook"
      :type="1"
      :addressChain="addressChain"
      :chainValue="addressChain.toUpperCase()"/>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import Cookies from 'js-cookie';
import Bus from '@/utils/bus';
import { EosModel } from '@/utils/eos/index';
import axios from 'axios';
import Io from '@/utils/socket/index';
// import { Decimal } from 'decimal.js'
import { toFixed, accMul, accDiv, toNonExponential,
  getTimestamp, getUUID, handleParentUrl, getUrlParams, QRcodeCode, countdown } from '@/utils/validate';
import ScatterPermission from '@/components/ScatterPermission';
import RiskHints from '@/components/RiskHints';
import Agreement from '@/components/Agreement';
import EosResource from '@/components/EosResource'; // eos资源
import TronResource from '@/components/TronResource'; // tron资源
import AddressBook from '@/components/AddressBook'; // 地址簿
import CurrencyExchange from '@/views/myWallet/components/CurrencyExchange'; // 兑换弹窗
import UsdtCurrencyExchange from '@/views/myWallet/components/UsdtCurrencyExchange'; // 兑换USDT
import CoinCharging from '@/views/myWallet/components/CoinCharging'; // 充提币弹窗
import CharginChange from '@/views/myWallet/components/CharginChange'; // 充提选择弹窗
import RemindSet from '@/components/RemindSet';
import WithdrawDialog from '@/components/WithdrawDialog'; // 充提币服务暂停
import { walletsLogo, vipLogo } from '@/utils/wallet';
import Tips from '@/components/Tips'; // 弹出提示
import Profit from './Profit'; // 盈亏统计

const freeCpu = {
  data() {
    return {
      checkCpu: true,
    }
  },
  props: {
    user: Object,
    levelRuleNum: Number
  },
  methods: {
    handleCpuGoPage() {
      this.$emit('listenFreeCpu', 'toPage');
    },
    handleGetVipLogo() {
      return vipLogo()
    },
    handleCheckbox() {
      if (!this.user.remainFreeOrderCount) {
        this.checkCpu = false;
        return;
      }
      this.checkCpu = !this.checkCpu;
      this.$emit('listenFreeCpu', 'check')
    },
  },
  template: `<div class="flexb">
    <span class="checkWord" :style="$store.state.app.language !== 'en' ? 'margin-top: 2px;' : 'margin-top: 0;'">
     &nbsp;{{ $t('ndxStake.cpuFreePend') }}（{{ $t('ndxStake.remainTimes', {num:user && user.remainFreeOrderCount || 0}) }}）
    </span>
    <el-popover
      placement="bottom"
      trigger="hover"
      popper-class="freeCpuPopover"
      style="display: inline-block;position: absolute; bottom: 3px; right: 23px"
      :style="$store.state.app.language === 'en' ? 'right: 85px; bottom: 0px;' : $store.state.app.language === 'ko' ? 'right: 28px;' : ''"
      v-if="$appName === 'eosNewdex'">
      <div>
        <div class="flex">
          <div>
            <img v-if="user && user.level"
            :src="handleGetVipLogo()" alt="">
            <i v-else
              class="iconfont icon-v gray"
              style="font-size: 17px;"></i>
          </div>
          <div class="ml5">{{ $t('ndxStake.cpuFreeNum', {num: levelRuleNum || 0}) }}</div>
        </div>
        <div class="mt5">
          <span class="freeCpuTip" style="color: #999;">* {{ $t('ndxStake.upCpuFreePend') }}</span>
          <span class="colorThis" @click="handleCpuGoPage" style="cursor: pointer;">{{ $t('ndxStake.upLevel') }} ></span>
        </div>
      </div>
      <div slot="reference" style="cursor: pointer;color: #999;" class="cpuHoverTip">
        <i class="iconfont icon-xinxi iconfont1"
        ></i>
      </div>
    </el-popover>
  </div>`,
};

export default {
  name: 'trading-center-bottom',
  components: {
    ScatterPermission,
    Agreement,
    RiskHints,
    Profit, // 盈亏统计
    EosResource, // eos资源
    TronResource, // tron资源
    CurrencyExchange, // 兑换弹窗
    RemindSet, // 行情提醒
    freeCpu,
    Tips, // 弹出提示
    UsdtCurrencyExchange, // 兑换usdt
    CoinCharging, // 充提币
    CharginChange, // 充提选择弹窗
    WithdrawDialog, // 充提币服务暂停
    AddressBook, // 地址簿
  },
  data() {
    return {
      loading: true,
      scatter: null,
      orderRequery: false,
      user: {},
      active: 0, // 限价 市价
      menu: [
        {
          name: 'xjtrad',
          value: 0
        },
        {
          name: 'sjtrad',
          value: 1
        }
      ],
      xjFormMr: {
        price: 0, // 买入价格
        number: 0, // 买入数量
        money: 0, // 金额
        sjmoney: 0, // 市场价买入 交易额
        password: '', // 钱包密码
        submitLoading: false,
        recipient: '', // 接收账户
      },
      xjFormMc: {
        price: 0, // 买入价格
        number: 0, // 买入数量
        money: 0, // 金额
        password: '', // 钱包密码
        submitLoading: false,
        recipient: '', // 接收账户
      },
      mrpesent: 0, // 买入选择百分比
      mcpesent: 0, // 买出选择百分比
      verifyAction: null, // 交易验证
      submitWay: null,

      xjmr_money_iserror: false,
      sjmc_number_iserror: false,

      xjmc_money_iserror: false,
      sjmr_sjmoney_iserror: false,

      sjmr_getaccount_iserror: false,
      sjmc_getaccount_iserror: false,

      min_xjmc_number: 1,
      min_exchang_money: 0.01, // 最小成交额

      forOrderWay: 0, // 下单方向
      orderParams: null, // 下单的数据存储
      timerBlance: true, // 余额获取开/关
      timer: {
        one: null,
        two: null
      },
      order: {
        account: '',
        wallet: '',
      },
      tradingPay: false, // 显示下单弹出
      loadingCode: false,
      overdueTimestamp: '', // 二维码过期时间
      overdueCode: false, // 是否过期
      walletConfig: null, // 当前下单配置项(二维码过期时可使用)
      checkPayPost: false,
      uuID: '',
      isOrderSuccessMessage: false, // 下单成功后 消息是否提示过
      symbolStatus: {
        id: 0,
        status: 0, // 交易对状态(0-上架，1-暂停，2-下架中，3-下架，4-待上架)
        closeTime: null,
        noticeUrl: null,
      },
      procedures: false, // 下单数量/金额是否超过扣去手续费后的余额
      buyNumberLimit: 0, // 买入数量控制 至少是 10的(价格精度 - 4)次方
      showCancelMrNum: false, // 重置买入量图标
      // showCancelMcNum: false, // 重置卖出量图标
      riskHintsVisible: false, // 币种风险提示
      symbolRisk: '',
      riskTipBoolean: false,
      listener: null,
      accuntMaskShow: false, // 是否跨链交易
      cozyTipVisible: false, // 侧链下单温馨提示显示值
      tipChecked: false, // 侧链下单温馨提示勾选状态值
      usdsTipBox: false, // USDS下卖单温馨提示显示值
      usdsChecked: false, // USDS下卖单温馨提示勾选状态值
      cozyTipRecipient: '', // 提示时的接收账户
      nodeAppStore: {}, // 节点列表
      nodeChecked: {}, // 当前节点
      showProfit: false, // 盈亏统计
      countdownTimer: false, // 即将上架交易对倒计时
      endtime: null,
      cDate: { // 即将上架交易对倒计时
        days: 0,
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      blanceTimer: null,
      currencyExchangeVisible: false, // 兑换弹窗显示值
      usdtCurrencyExchangeVisible: false, // 兑换usdt
      convert: '', // 兑换币种
      toolList: [
        {
          id: 1,
          name: 'positionStatistics',
          icon: 'icon-huaban19',
        },
        {
          id: 2,
          name: 'marketRemind',
          icon: 'icon-huaban21',
        },
        // {
        //   id: 3,
        //   name: 'getCpu',
        //   icon: 'icon-CPU',
        // },
      ],
      remindSetVisible: false, // 行情提醒设置
      remindSetStatus: 0, // 是否设置行情提醒
      priceData: {}, // 订阅价格
      tradeSlowUrl: {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360034157352',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360034157352',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360034157352',
        ko: 'https://newdex.zendesk.com/hc/ko/articles/360034157352'
      },
      cpuPercentOver: false, // cpu是否超过80%
      freeCpuChecked: false, // 是否使用免费cpu
      levelRuleNum: 0,
      tipsUseScatter: false,
      coinChargingVisible: false, // 充提币弹窗
      coinChargingWay: 2, // 1-提币 2-充值
      coin: null,
      charginChangeVisible: false, // 充提选择弹窗
      withdrawDialogVisible: false, // 充提币服务暂停
      addressBookVisible: false, // 地址簿
      addressChain: 'eos', // 地址簿链
      address: '', // 地址簿地址
    };
  },
  props: {
    trad: Object,
    symbolStatusProps: Object,
    embed: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    'trad.id': function change(val) {
      this.showProfit = false;
      this.trad.a.balanceFamt = null;
      this.trad.b.balanceFamt = null;
      const localRiskStatus = localStorage.getItem('riskStatus');
      if (!localRiskStatus) {
        localStorage.setItem('riskStatus', '[]');
      }
      const riskStatus = JSON.parse(localStorage.getItem('riskStatus'));
      const riskBoolean = riskStatus.find(v => val === v);
      if (this.trad.riskStatus) {
        this.riskHintsVisible = true;
      }
      if (riskBoolean) {
        this.riskTipBoolean = true;
        this.riskHintsVisible = false;
      }
      const p = this.trad.priceDecimal;
      this.xjFormMr.price = toFixed(toNonExponential(this.trad.a.price), p);
      this.xjFormMc.price = toFixed(toNonExponential(this.trad.b.price), p);
      this.xjFormMr.number = 0;
      this.xjFormMc.number = 0;
      this.xjFormMr.money = 0;
      this.xjFormMr.sjmoney = 0;
      this.xjFormMc.money = 0;
      this.mrpesent = 0;
      this.mcpesent = 0;
      this.xjFormMr.recipient = '';
      this.xjFormMc.recipient = '';
      // this.showCancelMrNum = false;
      // this.showCancelMcNum = false;
      this.symbolRisk = this.trad.a.name;
      this.riskTipBoolean = false;
      this.handleResetError();
    },
    '$store.state.app.language': function change() {
      new Promise((resolve, reject) => {
        this.handleGetSymbolStatus(resolve, reject);
      }).then(() => {});
    },
    'symbolStatusProps.id': function change() {
      this.symbolStatus = this.symbolStatusProps;
      if (this.symbolStatus.status === 5) {
        this.endtime = moment(this.symbolStatus.openTime).format('YYYY/MM/DD HH:mm:ss');
        this.handleCountdownStart()
      }
    },
    '$store.state.app.codeList.timer': function change() {
      const item = this.$store.state.app.codeList.list.find(v => v.symbol === this.trad.symbol);
      if (item) {
        this.symbolStatus.status = item.status;
        if (item.status === 5) {
          this.endtime = moment(this.symbolStatus.openTime).format('YYYY/MM/DD HH:mm:ss');
          this.handleCountdownStart()
        }
      }
    },
    '$store.state.app.trade.id': function change() {
      if (this.loading) {
        this.loading = false;
      }
    },
    // 监听账户等级变化
    '$store.state.app.accountInfo': function change(val) {
      this.user = val;
      if (this.user && this.user.remainFreeOrderCount === 0) {
        this.freeCpuChecked = false;
      }
      this.handleLevelRule();
    },
    '$store.state.app.scatter.chain': function change(val) {
      this.nodeChecked = this.nodeAppStore[val];
    },
    '$store.state.app.nodeChecked.timer': function change() {
      const chain = this.$store.state.app.scatter.chain || 'eos';
      this.nodeChecked = this.$store.state.app.nodeChecked[chain];
    },
    tradingPay: function change(val) {
      if (!val) {
        this.checkPayPost = val;
        this.walletConfig = null;
        this.tradingPay = false;
      }
    },
    'xjFormMr.money': function change(val) {
      const money = parseFloat(val, 0);
      this.xjmr_money_iserror = false;
      if (money < this.min_exchang_money && money) {
        this.xjmr_money_iserror = true;
      }
    },
    'xjFormMc.money': function change(val) {
      const money = parseFloat(val, 0);
      this.xjmc_money_iserror = false;
      if (money < this.min_exchang_money && money) {
        this.xjmc_money_iserror = true;
      }
    },
    '$store.state.app.marketPrice': function change() {
      // 订阅价格数据
      this.priceData = this.$store.state.app.marketPrice;
    },
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        // 免cpu选项
        if (val) {
          this.freeCpuChecked = true;
        }
      },
      deep: true,
    },
    // freeCpuChecked: function change(val) {
    //   const scatter = this.$store.state.app.scatter;
    //   if (val && scatter && scatter.identity && scatter.scatterFrom !== 'leafwallet') {
    //     this.tipsUseScatter = true;
    //     setTimeout(() => {
    //       this.freeCpuChecked = false;
    //     }, 100);
    //   }
    // }
  },
  computed: {
  },
  created() {
  },
  destroyed() {
    this.tradingPay = false;
  },
  mounted() {
    this.loading = false;
    this.handleBlanceIvit();
    const self = this;
    Bus.$on('handleBusValue', (e, n, index, way) => {
      const c = this.trad.coinDecimal; // 币种精度
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      const p = this.trad.priceDecimal; // 计价币种精度
      this.handleResetError(); // 重置表单错误
      const en = Number(e); // 价格
      const num = Number(n); // 数量
      if (!self.active) { // 限价
        // 价格
        this.xjFormMr.price = toFixed(toNonExponential(en), p);
        this.xjFormMc.price = toFixed(toNonExponential(en), p);
        if (way === 'mr') { // 买入深度点击，卖出变化
          // this.showCancelMcNum = true;
          const mcBlc = Number(this.trad.b.balance);
          this.xjFormMc.number = toFixed(toNonExponential(num), c);
          // if (index === 0 && mcBlc < num) {
          //   this.xjFormMc.number = mcBlc;
          // }
          if (mcBlc < num) {
            this.xjFormMc.number = mcBlc;
          }
          this.handleMcNumberInput(Number(this.xjFormMc.number));
        }
        if (way === 'mc') { // 卖出深度点击, 买入变化
          // this.showCancelMcNum = true;
          const mrBlc = Number(this.trad.a.balance);
          this.xjFormMr.number = toFixed(toNonExponential(num), c);
          this.handleMrNumberInput(num);
          if (index <= 17 && mrBlc < (num * en)) {
            this.xjFormMr.money = toFixed(mrBlc, v);
            this.handleMrMoenyInput(mrBlc);
          }
        }
        // return;
      }
      // 市价
      // this.showCancelMrNum = true;
      // this.showCancelMcNum = true;
      // this.xjFormMr.sjmoney = toFixed(toNonExponential(num * en), v);
      // this.xjFormMc.number = toFixed(toNonExponential(num), c);
    });
    /*
    * ORDER_UPDATE(1, "orderupdate", "订单更新"),
    * ORDER_SUCCESS(2, "ordersuccess", "下单成功"),
    * CANCEL_SUCCESS(3, "cancelsuccess", "撤单成功"),
    * ORDER_FAIL(4, "orderfail", "下单失败"),
    * CANCEL_FAIL(5, "cancelfail", "撤单失败");
    */
    Io.addListenerOrder('start', (res) => {
      this.listener = res.listener;
      // console.log('-------------交易中行-------------'); // eslint-disable-line
      // console.log(res); // eslint-disable-line
      if (res.type === 'ordersuccess' || res.type === 'orderupdate') { // 下单成功 / 戳和成功
        this.walletConfig = null;
        this.tradingPay = false;
        this.loading = false;
      }
      if (res.type === 'ordersuccess') { // 下单成功
        if (!this.isOrderSuccessMessage) { // 是否提示过消息
          this.isOrderSuccessMessage = true;
          try {
            if (this.$t) {
              this.$message.success(this.$t('jy.success1'));
              return;
            }
          } catch (error) {
            console.log(error); // eslint-disable-line
          }
        }
      }
      if (res.type === 'cancelsuccess') { // 撤单成功
      }
      if (res.type === 'orderfail') { // 下单失败
        this.loading = false;
        this.walletConfig = null;
        this.tradingPay = false;
        this.$message.error(this.$t('order.error1'));
      }
      if (res.type === 'cancelfail') { // 撤单失败
      }
    });
    this.user = this.$store.state.app.accountInfo;
    this.nodeAppStore = this.$store.state.app.nodeChecked;
    this.nodeChecked = this.nodeAppStore[this.$store.state.app.scatter.chain || 'eos'];
    // 获取等级说明
    if (this.$store.state.app.scatter.identity) {
      this.handleLevelRule();
    }
    // 即将开放交易倒计时
    if (this.symbolStatus.status === 5) {
      this.endtime = moment(this.symbolStatus.openTime).format('YYYY/MM/DD HH:mm:ss');
      this.handleCountdownStart()
    }
  },
  beforeDestroy() {
    this.timerBlance = false;
    Io.addListenerOrder({ // 停止监听订单信息
      way: 'stop',
      listener: this.listener
    });
    if (this.countdownTimer) { // 结束倒计时
      clearInterval(this.countdownTimer);
    }
    if (this.blanceTimer) { // 结束倒计时
      clearTimeout(this.blanceTimer);
    }
  },
  methods: {
    // 下单 协议确认回调
    handleListenAgree(res) {
      this.orderRequery = !res;
      if (res) {
        this.handleSubmitDeal(this.forOrderWay);
      }
    },
    // 下单 确认交易对是否可用
    handleGetSymbolStatus(resolve, reject) {
      const statusParams = {
        symbolId: this.trad.id
      }
      if (!statusParams.symbolId) return;
      this.$http.post('/symbol/getSymbolStatus', statusParams).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          reject();
          return;
        }
        this.symbolStatus = res.symbolStatus;
        this.symbolStatus.exchangeStatus = Number(res.exchangeStatus);
        resolve();
      });
    },

    // 重置表单错误
    handleResetError() {
      this.xjmr_money_iserror = false;
      this.sjmc_number_iserror = false;
      this.sjmr_sjmoney_iserror = false;
      this.xjmc_money_iserror = false;
      this.procedures = false;
      this.buyNumberLimit = 0;
    },
    // 重置买入量
    handleCancelMrNum() {
      this.xjFormMr.number = 0;
      this.showCancelMrNum = false;
    },
    handleCancelMcNum() {
      this.xjFormMc.number = 0;
      // this.showCancelMcNum = false;
    },
    // 获取 市价最低卖出量 大余1
    handleGetSjMinNumber() {
      const openShijia = this.$store.state.app.openShijia;
      if (openShijia && openShijia.length > 0) {
        if (this.trad.coinDecimal === 0) { // 币种精度
          this.min_xjmc_number = 1;
          return;
        }
        // openShijia[2] 当前买入价格
        const mrFirstPrice = openShijia[2];
        // 买入盘的第一个买入价格 * 卖出量 > 0.01
        this.min_xjmc_number = toFixed(this.min_exchang_money / mrFirstPrice, this.trad.coinDecimal);
        if (Number(this.min_xjmc_number) === 0) {
          this.min_xjmc_number = 1 / (10 ** this.trad.coinDecimal);
        }
        return;
      }
      this.min_xjmc_number = 0;
    },

    // 菜单切换
    handleMenuActive(value) {
      this.handleResetError();
      this.mrpesent = 0;
      this.mcpesent = 0;
      this.active = value;
    },

    /*
    * 限价/市价 买入/卖出提交
    * @params way 买卖类型：1-买入；2-卖出
    * @params priceType": 订单类型：1-限价；2-市价
    * @params type buy-market：市价买, sell-market：市价卖, buy-limit：限价买, sell-limit：限价卖,
    * @params account 账户名
    * @params symbol 交易对 ABC_EOS
    * @params price 委托价格
    * @params amount 买入市价交易额
    * @params count 委托数量
    */
    handleSubmitDeal(way) {
      if (this.loading) return;
      this.loading = true;
      this.forOrderWay = way;
      // this.handleFormatNumber(1.2); // 限价交易额 重新计算
      if (!this.active) {
        this.handleFormatNumber(2.2); // 限价交易量 重新计算
      }
      new Promise((resolve, reject) => {
        this.handleGetSymbolStatus(resolve, reject); // 改交易对是否可交易
      }).then(() => {
        this.loading = false;
        if (!this.symbolStatus.exchangeStatus) {
          this.$store.dispatch('setUpgradeSystem', new Date().getTime()); // 交易所运行状态
          return;
        }
        if ((this.symbolStatus.status !== 0 && this.symbolStatus.status !== 5)
        || (this.symbolStatus.status === 5 && way === 1)) {
          this.$message.error('Trading is incorrect');
          return
        }
        const scatterApp = this.$store.state.app.scatter;
        this.order.account = scatterApp.identity.accounts[0].name;
        this.order.wallet = scatterApp.wallet;
        if (!this.$store.state.app.accountAgree) { // 首次下单协议同意
          this.orderRequery = true;
          return;
        }
        const tradApp = this.$store.state.app.trade;
        if (tradApp && tradApp.riskStatus === 1) { // 风险提示下单
          const localRisk = localStorage.getItem('riskStatus');
          const riskId = tradApp.id;
          const riskStatus = localRisk ? JSON.parse(localRisk) : [];
          let riskBoolean = null;
          if (riskStatus.length > 0) {
            riskBoolean = riskStatus.find(v => riskId === v);
          }
          if (!riskBoolean) {
            this.riskHintsVisible = true;
            return;
          }
        }

        // usds稳定币提示卖出信息
        // const usdsList = this.$store.state.app.stableCode;
        // if (way === 2 && usdsList.find(v => v === this.trad.b.name) && this.trad.a.name === 'EOS') {
        //   const usdsCareful = JSON.parse(localStorage.getItem('usdsCareful') || '{}');
        //   const scat = this.$store.state.app.scatter;
        //   const userName = scat.identity.accounts[0].name;
        //   const userUsdsObj = usdsCareful[userName];
        //   if (!userUsdsObj || !userUsdsObj[this.trad.b.name]) {
        //     // 弹出注意提示 handleUsdsTipSure
        //     this.usdsTipBox = true;
        //     return;
        //   }
        // }
        // 下单执行
        this.orderNext();
      });
    },
    // 下单执行
    orderNext() {
      if (!this.active) { // 限价单
        this.handleXianJia(this.forOrderWay);
        return;
      }
      // 市价下单判断 是否有对手盘
      const openShijia = this.$store.state.app.openShijia[this.forOrderWay - 1];
      if (!openShijia) {
        this.$message.warning(this.$t('jy.noTransion'));
        return;
      }
      this.handleShiJia(this.forOrderWay);
    },
    // 限价
    handleXianJia(way) {
      const n = this.trad.coinDecimal; // 币种精度
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      // const p = this.trad.priceDecimal; // 价格精度
      const orderPrice = way === 1 ? Number(this.xjFormMr.price) : Number(this.xjFormMc.price);
      if (orderPrice <= 0) {
        this.$message.error(this.$t('jy.error1'));
        return;
      }
      const money = way === 1 ? Number(this.xjFormMr.money) : Number(this.xjFormMc.number);
      const orderCount = way === 1 ? toFixed(Number(this.xjFormMr.number), n) : toFixed(Number(this.xjFormMc.number), n);
      if (money === 0 && way === 1) {
        this.xjmr_money_iserror = true;
        return;
      }
      if (Number(this.xjFormMc.money) === 0 && way === 2) {
        this.xjmc_money_iserror = true;
        return;
      }
      if (orderCount <= 0 || isNaN(orderCount)) {
        this.$message.error(this.$t('jy.error2'));
        return;
      }
      if (money < this.min_exchang_money && way === 1) {
        this.xjmr_money_iserror = true;
        return;
      }
      if (way === 2 && Number(this.xjFormMc.money) < this.min_exchang_money) {
        this.xjmc_money_iserror = true;
        return;
      }

      const hasMoney = way === 1 ? this.trad.a.balance : this.trad.b.balance;
      if (hasMoney < money) {
        this.$message.error(this.$t('jy.error3'));
        return;
      }
      this.xjmc_money_iserror = false;
      this.xjmr_money_iserror = false;

      const params = {
        price: toNonExponential(orderPrice),
        amount: way === 1 ? toFixed(Number(this.xjFormMr.money), v) : toFixed(Number(this.xjFormMc.money), v),
        count: orderCount,
      };
      const xjFormMrMoney = toFixed(toNonExponential(Number(this.xjFormMr.money)), v);
      const xjFormMcNumber = toFixed(toNonExponential(Number(this.xjFormMc.number)), n);
      params.quantity = way === 1 ? `${xjFormMrMoney} ${this.trad.b.name}` : `${xjFormMcNumber} ${this.trad.a.name}`;
      if (!this.trad.crossNoLink) {
        // 跨链交易
        // 接收账户
        const recipient = way === 1 ? this.xjFormMr.recipient : this.xjFormMc.recipient;
        params.receiver = recipient;
        if (!recipient) {
          this.$message.error(this.$t('bosChain.pleaseInputAccount'));
          return;
        }
        if (recipient.length > 12) {
          this.$message.error(this.$t('bosChain.lessThan'));
          return;
        }
        // 验证账户是否存在
        this.handleValidateReceive(params, way);
        return;
      }
      this.handleSubmitDealAction(params, way);
    },
    // 市价
    handleShiJia(way) {
      const xjFormMrMoney = Number(this.xjFormMr.sjmoney);
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      if (way === 1) {
        if (xjFormMrMoney < this.min_exchang_money) {
          // this.$message.error(this.$t('jy.error1'));
          this.sjmr_sjmoney_iserror = true;
          return;
        }
      }

      const xjFormMcNumber = Number(this.xjFormMc.number);
      if (way === 2) {
        this.handleGetSjMinNumber();
        if (xjFormMcNumber < this.min_xjmc_number || xjFormMcNumber === 0) {
          // this.$message.error(this.$t('jy.error2'));
          this.sjmc_number_iserror = true;
          return;
        }
      }

      const money = way === 1 ? this.xjFormMr.sjmoney : this.xjFormMc.number;
      const hasMoney = way === 1 ? this.trad.a.balance : this.trad.b.balance;
      if (hasMoney < money) {
        this.$message.error(this.$t('jy.error3'));
        return;
      }
      this.sjmc_number_iserror = false;
      this.sjmr_sjmoney_iserror = false;
      const params = {
        price: null,
        amount: way === 1 ? xjFormMrMoney : 0,
        count: way === 1 ? 0 : xjFormMcNumber
      };
      params.quantity = way === 1 ? params.amount : params.count;
      const q = `${toFixed(xjFormMcNumber, this.trad.coinDecimal)} ${this.trad.a.name}`;
      params.quantity = way === 1 ? `${toFixed(xjFormMrMoney, v)} ${this.trad.b.name}` : q;
      if (!this.trad.crossNoLink) {
        // 跨链交易
        // 接收账户
        const recipient = way === 1 ? this.xjFormMr.recipient : this.xjFormMc.recipient;
        params.receiver = recipient;
        if (!recipient) {
          this.$message.error(this.$t('bosChain.pleaseInputAccount'));
          return;
        }
        if (recipient.length > 12) {
          this.$message.error(this.$t('bosChain.lessThan'));
          return;
        }
        // 验证账户是否存在
        this.handleValidateReceive(params, way);
        return;
      }
      this.handleSubmitDealAction(params, way);
    },

    // 验证账户是否存在
    handleValidateReceive(params, way) {
      this.orderParams = params;
      let nodeobj = null;
      const nodeChecked = this.$store.state.app.nodeChecked;
      if (way === 1) {
        nodeobj = nodeChecked[this.trad.baseChain];
      } else {
        nodeobj = nodeChecked[this.trad.valuationChain];
      }
      const kip = nodeobj.url;
      const accountParams = {
        account_name: params.receiver
      };
      this.loading = true;
      axios.post(`${kip}/v1/chain/get_account`, JSON.stringify(accountParams)).then((result) => {
        this.loading = false;
        if (result.status !== 200) {
          if (way === 1) {
            this.sjmr_getaccount_iserror = true;
            return;
          }
          this.sjmc_getaccount_iserror = true;
          return;
        }
        if (way === 1) {
          this.sjmr_getaccount_iserror = false;
        } else {
          this.sjmc_getaccount_iserror = false;
        }
        this.cozyTipRecipient = params.receiver;
        // 跨链交易，接收账号的出现温馨提示
        const localCozyTip = localStorage.getItem('localCozyTip');
        const localCozyTipArray = localCozyTip ? JSON.parse(localCozyTip) : [];
        const riskBoolean = localCozyTipArray.find(vvv => this.trad.a.name === vvv);
        if (!riskBoolean) {
          this.cozyTipVisible = true;
          return;
        }
        // --- end
        this.handleSubmitDealAction(params, way);
      }).catch(() => {
        this.loading = false;
        if (way === 1) {
          this.sjmr_getaccount_iserror = true;
          return;
        }
        this.sjmc_getaccount_iserror = true;
      })
    },

    // 跨链交易，接收账号的出现温馨提示 --- 确定
    handleCozyTipSure() {
      const way = this.forOrderWay;
      if (this.tipChecked) {
        const localCozyTip = localStorage.getItem('localCozyTip');
        const tipStatus = localCozyTip ? JSON.parse(localCozyTip) : [];
        tipStatus.push(this.trad.a.name);
        localStorage.setItem('localCozyTip', JSON.stringify(tipStatus));
      }
      const params = this.orderParams;
      this.cozyTipVisible = false;
      this.handleSubmitDealAction(params, way);
    },

    // USDS交易，下卖单温馨提示 --- 确定
    handleUsdsTipSure() {
      let usdsCareful = JSON.parse(localStorage.getItem('usdsCareful') || '{}');
      const scat = this.$store.state.app.scatter;
      const userName = scat.identity.accounts[0].name;
      if (usdsCareful[userName]) {
        usdsCareful[userName][this.trad.b.name] = this.usdsChecked ? 1 : 0;
      } else {
        const usdsObj = {};
        usdsObj[userName] = {};
        usdsObj[userName][this.trad.b.name] = this.usdsChecked ? 1 : 0;
        usdsCareful = Object.assign(usdsCareful, usdsObj);
      }
      localStorage.setItem('usdsCareful', JSON.stringify(usdsCareful));
      this.usdsChecked = false;
      this.usdsTipBox = false;

      // 执行下单
      this.orderNext();
    },

    /*
    * 下单
    * @params way 买卖类型：1-买入；2-卖出
    */
    handleSubmitDealAction(params, way) {
      this.loading = true;
      this.xjmc_money_iserror = false; // 移除>0.01错误
      this.xjmr_money_iserror = false; // 移除>0.01错误
      const scat = this.$store.state.app.scatter;
      const priceType = this.active ? 2 : 1;
      const paramsTo = Object.assign({
        type: this.handleTypeFormate(way, priceType),
        symbol: `${this.trad.a.name}_${this.trad.b.name}`,
        account: this.order.account,
      }, params);
      const walletName = Cookies.get('walletRef') || '';
      let symbolForRemarks = `${this.trad.a.code}-${this.trad.a.name}-${this.trad.b.name}`;
      if (this.trad.symbol.indexOf('_') >= 0 && this.trad.b.code === 'issue.newdex') {
        symbolForRemarks = `${this.trad.a.name}_${this.trad.b.name}`;
      }
      const remarksJson = {
        type: this.handleTypeFormate(way, priceType),
        // account: this.order.account,
        symbol: symbolForRemarks.toLowerCase(),
        price: toFixed(paramsTo.price, this.trad.priceDecimal),
        // count: params.count,
        // amount: params.amount,
        channel: 'web',
        // ref: walletName ? encodeURI(walletName) : null,
      }
      if (walletName) {
        remarksJson.ref = encodeURI(walletName);
      }
      if (params.receiver) {
        remarksJson.receiver = params.receiver; // 接收账户
      }

      // 获取收款账号
      const sapp = this.$store.state.app;
      let toAccount = sapp.exchangeAccount[sapp.scatter.chain];
      // 链上合约下单 收款账号更换
      if (this.trad.contractOnChain === 1) {
        toAccount = this.trad.dexEntrustedAccount || sapp.exchangeAccount[`chain-${sapp.scatter.chain}`];
      }
      const trobj = {
        trad: this.trad,
        toAccount,
        code: way === 1 ? this.trad.b.code : this.trad.a.code,
        quantity: params.quantity,
        remarks: JSON.stringify(remarksJson)
      }
      // 会员免CPU下单
      trobj.remainFreeOrderCount = 0;
      if (this.user.remainFreeOrderCount && this.freeCpuChecked) { // 有下单次数 并且 选择使用
        if (sapp.scatter.wallet === 'Scatter') {
          trobj.remainFreeOrderCount = this.user.remainFreeOrderCount
        }
      }
      // tron 波场币 下单
      if (scat.wallet === 'TronLink') {
        //  TronLink 下单
        this.loading = true;
        trobj.price = parseFloat(paramsTo.price, 0);
        const ten = 10 ** this.trad.coinDecimal;
        const tenValuationCoinDecimal = 10 ** this.trad.valuationCoinDecimal;
        const pcount = parseFloat(params.count, 0);
        const pamount = parseFloat(params.amount, 0);
        trobj.count = accMul(ten, pcount);
        trobj.amount = accMul(tenValuationCoinDecimal, pamount);
        trobj.quantity = parseFloat(params.quantity, 0);
        trobj.toAccount = this.trad.dexEntrustedAccount
        EosModel.tronTransaction(trobj, (res) => {
          // console.log(res); // eslint-disable-line
          this.loading = false;
          if (res.processed) { // 下单成功
            this.isOrderSuccessMessage = true;
            this.$message.success(this.$t('jy.success1'));
            // return
          }
          // EosModel.handleScatterErrorBack(res);
        });
        return;
      }
      // 内嵌交易页下单
      if (this.embed) {
        const accountItem = this.$store.state.app.scatter.identity.accounts[0];
        const formName = accountItem.name;
        const permission = accountItem.authority;
        const quantity = trobj.quantity;
        const dataItem = {
          actions: [
            {
              account: trobj.code,
              name: 'transfer',
              authorization: [{
                actor: formName, // 转账者
                permission,
              }],
              data: {
                from: formName,
                to: trobj.toAccount,
                quantity,
                memo: trobj.remarks
              }
            }
          ]
        };
        const self = this;
        const messageTransaction = { action: 'transaction', data: dataItem }
        const paUrl = getUrlParams(window.location.href);
        const paRef = paUrl ? paUrl.ref : null;
        const targetOrigin = handleParentUrl(paRef);
        window.parent.postMessage(JSON.stringify(messageTransaction), targetOrigin);
        console.log('newdex -> request transaction'); // eslint-disable-line
        console.log(messageTransaction, targetOrigin); // eslint-disable-line
        Bus.$off('busReceiveMessage');
        Bus.$on('busReceiveMessage', (msg, res) => {
          this.isOrderSuccessMessage = false;
          if (msg === 'transaction') {
            self.loading = false;
            if (res && res.processed) { // 下单成功
              this.$message.success(this.$t('jy.success1'));
            } else if (!res) {
              this.$message.error('This is an error that returns null values');
            } else {
              EosModel.handleScatterErrorBack(res);
            }
          }
        })
        return;
      }
      // 其他钱包下单 -- 扫码下单
      if (scat.wallet !== 'Scatter'
      && scat.wallet !== 'Scatter-Desktop'
      && scat.wallet !== 'Ironman'
      && scat.wallet !== 'cloudWallet') {
        this.loading = false;
        this.isOrderSuccessMessage = false; // 成功消息提示
        this.handleOrderByWallet(params, way, remarksJson);
        return;
      }
      // Scatter 下单
      this.loading = true;
      // 云钱包 关闭loading 状态
      if (scat.wallet === 'cloudWallet') {
        this.loading = false;
      }
      EosModel.eosTransaction(trobj, (res) => {
        // console.log(res); // eslint-disable-line
        this.loading = false;
        if (res.processed || res.transaction_id) { // 下单成功
          Bus.$emit('showLoading', true);
          this.isOrderSuccessMessage = true;
          this.$message.success(this.$t('jy.success1'));
          return
        }
        Bus.$emit('showLoading', false);
        EosModel.handleScatterErrorBack(res);
      });
    },
    /*
    * 钱包下单二维码配置信息
    * @params 下单数据
    */
    handleWalletConfig(params) {
      const sapp = this.$store.state.app;
      const scat = sapp.scatter;
      const dappName = 'Newdex'; // dapp名字，用于在钱包APP中展示，可选
      const dappIcon = 'https://ndi.340wan.com/i.png'; // dapp图标Url，用于在钱包APP中展示，可选
      this.uuID = `web-${getUUID()}`; // uuID, 1 代表web
      // const env = process.env.NODE_ENV;
      // 获取收款账号
      let toAccount = sapp.exchangeAccount[sapp.scatter.chain];
      // 合约下单
      if (this.trad.contractOnChain === 1) {
        toAccount = sapp.exchangeAccount[`chain-${sapp.scatter.chain}`];
      }
      // switch (env) {
      //   case 'development':
      //     // toAccount = 'aixinjueluo1';
      //     // toAccount = sapp.toAccount;
      //     break;
      //   case 'production':
      //     // toAccount = sapp.toAccount;
      //     break;
      //   default:
      //     break;
      // }
      const postUrl = `${window.location.origin}/api/tc?uuid=${this.uuID}`; // 钱包回调;
      const fromAccount = this.order.account;
      const config = {
        protocol: 'SimpleWallet', // 协议名，钱包用来区分不同协议，本协议为 SimpleWallet
        version: '1.0', // 协议版本信息，如1.0
        dappName,
        dappIcon,
        action: 'transfer', // 支付时，赋值为transfer，必须
        from: fromAccount, // 付款人的EOS账号，可选
        to: toAccount, // 收款人的EOS账号，必须
        amount: params.amount, // 转账数量，必须
        contract: params.contract, // 转账的token所属的contract合约账号名，必须
        symbol: params.symbol, // 转账的token名称，必须
        precision: params.precision, // 转账的token的精度，小数点后面的位数，必须
        dappData: params.dappData, // 由dapp生成的业务参数信息，需要钱包在转账时附加在memo中发出去，格式为:k1=v1&k2=v2，可选
        // desc: '', // 交易的说明信息，钱包在付款UI展示给用户，最长不要超过128个字节，可选
        expired: this.overdueTimestamp + 300, // 二维码过期时间，unix时间戳
        callback: postUrl, // 用户完成操作后，钱包回调拉起dapp移动端的回调URL,如https://abc.com?action=login&qrcID=123，可选
        // callbackUrl: postUrl,
        // blockchain: 'eos', // 指定节点
      }
      if (scat.wallet === 'TokenPocket') {
        config.callbackUrl = postUrl
      }
      return config;
    },

    /*
    * 其他钱包下单
    * @params way 买卖类型：1-买入；2-卖出
    */
    handleOrderByWallet(params, way, remarksJson) {
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      const config = {
        quantity: params.quantity,
        amount: way === 1 ? Number(params.amount) : Number(params.count), // 转账数量，必须
        contract: way === 1 ? this.trad.b.code : this.trad.a.code, // 转账的token所属的contract账号名，必须
        symbol: way === 1 ? this.trad.b.name : this.trad.a.name, // 转账的token名称，必须
        precision: way === 1 ? v : this.$store.state.app.trade.coinDecimal, // 转账的token的精度，小数点后面的位数，必须
        dappData: JSON.stringify(remarksJson), // memo
      }
      this.walletConfig = this.handleWalletConfig(config);
      this.tradingPay = true;
      this.handleGetPayCode();
    },

    handleGetPayCode() { // 二维码生成
      if (this.timer.one) {
        clearTimeout(this.timer.one);
      }
      this.loadingCode = true;
      this.overdueCode = false;
      getTimestamp((timestamp) => {
        this.overdueTimestamp = timestamp;
        this.walletConfig.expired = Math.floor(timestamp / 1000) + 300; // 更新过期时间
        this.timer.one = setTimeout(() => {
          const params = JSON.stringify(this.walletConfig);
          const canvas = document.getElementById('payCode');
          QRcodeCode(params, canvas, 240, (err) => {
            if (err) {
              this.$message.error(this.$t('jy.codeError'));
              return;
            }
            this.loadingCode = false;
            // 是否有回调
            this.checkPayPost = true; // 开启后台数据查询
            this.handleWalletTransfer();
          })
        }, 500);
      });
    },

    // 轮循验证是否转账成功
    handleWalletTransfer() {
      const params = {
        timestamp: Math.floor(this.overdueTimestamp / 1000) + 300,
        uuid: this.uuID
      };
      this.$http.post('/account/checkTransferStatus', params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        if (res.status === 0 && this.checkPayPost) {
          // 未有数据回调
          if (this.timer.two) {
            clearTimeout(this.timer.two);
          }
          this.timer.two = setTimeout(() => this.handleWalletTransfer(), 1000);
          return;
        }
        if (res.status === 1) {
          // 转账成功
          this.walletConfig = null;
          this.tradingPay = false;
          if (!this.isOrderSuccessMessage) { // 是否提示过消息
            this.isOrderSuccessMessage = true;
            this.$message.success(this.$t('jy.success1'));
          }
          return;
        }
        if (res.status === 2) {
          // 转账失败
          this.walletConfig = null;
          this.tradingPay = false;
          if (!this.isOrderSuccessMessage) { // 是否提示过消息
            this.isOrderSuccessMessage = true;
            this.$message.error(this.$t('wallet.orderError'));
          }
        }
        if (res.status === 3) {
          // 转账时间过期
          this.overdueCode = true;
        }
        if (res.status === 4) {
          // 用户取消
          this.walletConfig = null;
          this.tradingPay = false;
        }
      });
    },

    // 刷新二维码
    handleNewTransferCode() {
      if (this.walletConfig) {
        this.uuID = `web-${getUUID()}`;
        this.handleGetPayCode();
      }
    },

    // 百分比显示
    formatTooltip(val) {
      return `${val}%`;
    },

    // 登录授权
    handleWalletPermission(bychain) {
      if (this.embed) return; // 内嵌交易下单不需要登录弹出
      const checkWallet = localStorage.getItem('checkWallet');
      sessionStorage.setItem('checkWalletByChain', bychain.toUpperCase());
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },

    // 余额获取
    handleBlanceIvit() {
      if (this.$appName === 'eosNewdex') {
        this.min_exchang_money = 0.01;
        this.handleEosBlanceIvit();
      }
      if (this.$appName === 'tronNewdex') {
        this.min_exchang_money = 1000;
        if (this.trad.b.name === 'USDT') {
          this.min_exchang_money = 15;
        }
        this.handleTronBlanceIvit();
      }
      if (this.blanceTimer) {
        clearTimeout(this.blanceTimer);
      }
      this.blanceTimer = setTimeout(this.handleBlanceIvit, 5000);
    },

    // EOS 余额获取
    handleEosBlanceIvit() {
      const sapp = this.$store.state.app;
      if (this.timerBlance && sapp.scatter && sapp.scatter.identity) {
        if (this.trad && this.trad.b && this.trad.b.name) {
          // 如果是fibos链
          if (sapp.scatter && sapp.scatter.chain === 'fibos') {
            EosModel.getTableRowsForFibos((result) => {
              if (result && result.rows.length > 0) {
                const rows = result.rows;
                const rowsMap = rows.map(v => v.balance);
                rowsMap.forEach((vv) => {
                  const v = vv;
                  const qusplit = v.quantity.split(' ');
                  v.symbol = qusplit[1];
                });
                // 卖出方向的余额 获取
                const aname = this.trad.a.name;
                const aobj = rowsMap.find(v => v.symbol === aname && v.contract === this.trad.a.code);
                if (aobj) {
                  this.trad.b.balance = parseFloat(aobj.quantity); // 卖出方向的余额
                  this.trad.b.balanceFamt = aobj.quantity; // 卖出方向的余额
                } else {
                  const errorye = `${toFixed(0, this.trad.coinDecimal)} ${this.trad.a.name}`;
                  this.trad.b.balance = parseFloat(errorye); // 卖出方向的余额
                  this.trad.b.balanceFamt = errorye; // 卖出方向的余额
                }
                // 买入方向的余额 获取
                const bname = this.trad.b.name;
                const bobj = rowsMap.find(v => v.symbol === bname && v.contract === this.trad.b.code);
                if (bobj) {
                  this.trad.a.balance = parseFloat(bobj.quantity); // 买入方向的余额
                  this.trad.a.balanceFamt = bobj.quantity; // 买入方向的余额
                } else {
                  const errorye = `${toFixed(0, this.trad.coinDecimal)} ${this.trad.b.name}`;
                  this.trad.a.balance = parseFloat(errorye); // 买入方向的余额
                  this.trad.a.balanceFamt = errorye; // 买入方向的余额
                }
              }
            });
            return;
          }
          EosModel.getCurrencyBalance(this.trad.b.name, this.trad.b.code, (result) => {
            if (result.code === 100001) {
              const errorye = `${toFixed(0, this.trad.coinDecimal)} ${this.trad.b.name}`;
              this.trad.a.balance = parseFloat(errorye); // 卖出方向的余额
              this.trad.a.balanceFamt = errorye; // 卖出方向的余额
              return;
            }
            if (result.error) {
              // this.$message.error(`${result.message} 【${result.error.code}】`);
              return;
            }
            let res = result;
            if (!res) return;
            if (res.length === 0) {
              // res = `0.0000 ${this.trad.b.name}`;
              res = `${toFixed(0, this.trad.valuationCoinDecimal)} ${this.trad.b.name}`;
            } else {
              res = result[0];
            }
            this.trad.a.balance = parseFloat(res); // 买入方向的余额
            this.trad.a.balanceFamt = res; // 买入方向的余额
          });
          EosModel.getCurrencyBalance(this.trad.a.name, this.trad.a.code, (result) => {
            if (result.code === 100001) {
              const errorye = `${toFixed(0, this.trad.coinDecimal)} ${this.trad.a.name}`;
              this.trad.b.balance = parseFloat(errorye); // 卖出方向的余额
              this.trad.b.balanceFamt = errorye; // 卖出方向的余额
              return;
            }
            if (result.error) {
              // this.$message.error(`${result.message} 【${result.error.code}】`);
              return;
            }
            let res = result;
            if (!res) return;
            if (res.length === 0) {
              res = `${toFixed(0, this.trad.coinDecimal)} ${this.trad.a.name}`;
            } else {
              res = result[0];
            }
            this.trad.b.balance = parseFloat(res); // 卖出方向的余额
            this.trad.b.balanceFamt = res; // 卖出方向的余额
          });
        }
      }
    },

    // Tron 余额获取
    async handleTronBlanceIvit() {
      console.log('trad'); // eslint-disable-line
      console.log(this.trad); // eslint-disable-line
      // 买入方向的余额
      if (this.trad.b.name === 'TRX') {
        const trxBalanceAwait = await EosModel.getTronBalance('', 'trx');
        const trxBalance = `${trxBalanceAwait.trx} ${this.trad.b.name}`;
        this.trad.a.balance = parseFloat(trxBalance); // 买入方向的余额
        this.trad.a.balanceFamt = trxBalance; // 买入方向的余额
      }
      if (this.trad.b.name === 'USDT') {
        const trcBalanceAwait = await EosModel.getTronBalance(this.trad.a.code, this.trad.a.trc)
        const trcBalance = trcBalanceAwait.other;
        const trxBalance = `${toFixed(trcBalance, this.trad.valuationCoinDecimal)} ${this.trad.b.name}`;
        this.trad.a.balance = parseFloat(trxBalance); // 买入方向的余额
        this.trad.a.balanceFamt = trxBalance; // 买入方向的余额
      }
      // 卖出方向的余额
      if (this.trad.a.name === 'TRX') {
        const trxBalanceAwait = await EosModel.getTronBalance('', 'trx');
        const trxBalance2 = `${toFixed(trxBalanceAwait.trx, this.trad.coinDecimal)} ${this.trad.a.name}`;
        this.trad.b.balance = parseFloat(trxBalance2); // 卖出方向的余额
        this.trad.b.balanceFamt = trxBalance2; // 卖出方向的余额
      }
      if (this.trad.a.name !== 'TRX') {
        // 卖出方向的余额
        const trcBalanceAwait = await EosModel.getTronBalance(this.trad.b.code, this.trad.b.trc)
        let trcBalance = trcBalanceAwait.other;
        trcBalance = `${toFixed(trcBalance, this.trad.coinDecimal)} ${this.trad.a.name}`;
        this.trad.b.balance = parseFloat(trcBalance); // 卖出方向的余额
        this.trad.b.balanceFamt = trcBalance; // 卖出方向的余额
      }
    },

    // 离开焦点时 格式化进度位
    handleFormatNumber(way) {
      if (way === 1.2 && Number(this.xjFormMr.money) === 0) return;
      if (way === 2.2 && Number(this.xjFormMc.money) === 0) return;
      const n = this.trad.coinDecimal; // 币种精度
      const p = this.trad.priceDecimal; // 价格精度
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      if (way === 1) { // 买入限价数量
        this.xjFormMr.number = toFixed(this.xjFormMr.number, n);
        // this.handleMrNumberInput(this.xjFormMr.number);
      }
      if (way === 1.1) { // 买入限价价格
        this.xjFormMr.price = toFixed(toNonExponential(Number(this.xjFormMr.price)), p);
        // this.handleMrPriceInput(this.xjFormMr.price);
      }
      if (way === 1.2) { // 买入交易额
        this.xjFormMr.money = toFixed(toNonExponential(Number(this.xjFormMr.money)), v);
        // this.handleMrMoenyInput(this.xjFormMr.money);
      }
      if (way === 2) { // 卖出量
        this.xjFormMc.number = toFixed(this.xjFormMc.number, n);
        this.handleMcNumberInput(this.xjFormMc.number);
        // this.handleOverFlowMoney(); // 手续费计算
      }
      if (way === 2.1) { // 卖出价格
        this.xjFormMc.price = toFixed(toNonExponential(Number(this.xjFormMc.price)), p);
        this.handleMcPriceInput(this.xjFormMc.price);
      }
      if (way === 2.2) { // 卖出交易额
        this.xjFormMc.money = toFixed(toNonExponential(Number(this.xjFormMc.money)), v);
        // this.handleMcMoenyInput(this.xjFormMc.money);
        this.xjFormMc.number = toFixed(toNonExponential(Number(this.xjFormMc.number)), n);
        this.handleMcNumberInput(this.xjFormMc.number);
      }
      if (way === 3) { // 市价买入
        this.xjFormMr.sjmoney = toFixed(this.xjFormMr.sjmoney, v);
      }
    },

    // 交易类型 参数数
    handleTypeFormate(way, priceType) {
      if (way === 1) {
        return priceType === 1 ? 'buy-limit' : 'buy-market';
      } else if (way === 2) {
        return priceType === 1 ? 'sell-limit' : 'sell-market';
      }
      return 'error';
    },

    // 限价买入输入价格
    handleMrPriceInput(val) {
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      const blc = Number(this.trad.a.balance);
      const money = toNonExponential(accMul(Number(val), Number(this.xjFormMr.number)));
      this.xjFormMr.money = toFixed(money, v);
      let pesent = 0;
      if (blc > 0) {
        pesent = (money / blc) * 100;
        if (pesent > 100) {
          pesent = 100;
        }
        this.mrpesent = Number(pesent.toFixed(2));
      }
      // this.handleMrInputAction();
    },

    // 限价买入输入买入量
    handleMrNumberInput(val) {
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      const blc = Number(this.trad.a.balance);
      const price = Number(this.xjFormMr.price);
      const money = toNonExponential(accMul(Number(val), price));
      // this.showCancelMrNum = false;
      this.xjFormMr.money = toFixed(money, v);
      let pesent = 0;
      if (blc > 0) {
        pesent = (money / blc) * 100;
        if (pesent > 100) {
          pesent = 100;
        }
        this.mrpesent = Number(pesent.toFixed(2));
      }
      // this.handleBuyNumberLimit();
      // this.handleMrInputAction();
    },

    // 限价买入输入百分比
    handleMrPesentInput(val) {
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      this.showCancelMrNum = false;
      this.mrpesent = val;
      const blc = Number(this.trad.a.balance);
      const price = Number(this.xjFormMr.price);
      if (this.active) {
        const money = toNonExponential(accMul(blc, (val / 100)));
        this.xjFormMr.sjmoney = toFixed(money, v);
        // this.handleMrInputAction();
        return;
      }
      if (blc > 0 && price > 0) {
        const number = accMul(blc, (val / 100)) / price;
        this.xjFormMr.number = toFixed(toNonExponential(number), this.trad.coinDecimal);
        const money = accMul(blc, (val / 100));
        this.xjFormMr.money = toFixed(money, v);
        // this.handleMrInputAction();
        return;
      }
      this.mrpesent = 0;
    },

    // 限价买入 交易额输入
    handleMrMoenyInput(val) {
      const blc = Number(this.trad.a.balance);
      const price = Number(this.xjFormMr.price);
      const money = Number(val);

      // 数量的变化
      const number = accDiv(money, price);
      this.xjFormMr.number = toFixed(number, this.trad.coinDecimal);

      let pesent = 0;
      if (blc > 0) {
        pesent = (money / blc) * 100;
        if (pesent > 100) {
          pesent = 100;
        }
        this.mrpesent = Number(pesent.toFixed(2));
      }
      // this.handleMrInputAction();
    },

    // 买入的各种输入后执行
    handleMrInputAction() {
      if (this.xjFormMr.money < this.min_exchang_money) { // 清除 错误提示
        this.xjmr_money_iserror = true;
        return
      }
      this.xjmr_money_iserror = false;
    },

    // 限价卖出输入价格
    handleMcPriceInput(valrest) {
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      let val = valrest;
      if (val > 99999.99999999) {
        val = Number(toFixed(99999.99999999, v));
        this.xjFormMc.price = val;
      }
      const blc = Number(this.trad.b.balance);
      const number = Number(this.xjFormMc.number);
      const money = toNonExponential(accMul(Number(val), number));
      this.xjFormMc.money = toFixed(money, v);
      let pesent = 0;
      if (blc > 0) {
        pesent = (number / blc) * 100;
        if (pesent > 100) {
          pesent = 100;
        }
        this.mcpesent = Number(pesent.toFixed(2));
      }
      // this.handleMcInputAction();
    },

    // 限价卖出输入 卖出量
    handleMcNumberInput(val) {
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      const blc = Number(this.trad.b.balance);
      const price = Number(this.xjFormMc.price);
      const money = toNonExponential(accMul(Number(val), price));
      this.xjFormMc.money = toFixed(money, v);
      // this.showCancelMcNum = false;
      let pesent = 0;
      if (blc > 0) {
        pesent = (val / blc) * 100;
        if (pesent > 100) {
          pesent = 100;
        }
        this.mcpesent = Number(pesent.toFixed(2));
      }
      if (this.procedures) {
        this.procedures = false;
      }
      // this.handleMcInputAction();
    },

    // 限价卖出输入百分比
    handleMcPesentInput(val) {
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      // this.showCancelMcNum = false;
      this.mcpesent = val;
      const blc = Number(this.trad.b.balance);
      if (blc > 0) {
        const price = Number(this.xjFormMc.price);
        const number = accMul(Number(val) / 100, blc);
        this.xjFormMc.number = toFixed(toNonExponential(number), this.trad.coinDecimal);
        const money = toNonExponential(accMul(Number(this.xjFormMc.number), price));
        this.xjFormMc.money = toFixed(money, v);
        // this.handleOverFlowMoney(); // 手续费计算
        // this.handleMcInputAction();
        return;
      }
      this.mcpesent = 0;
    },

    // 限价卖出 交易额输入
    handleMcMoenyInput(val) {
      const blc = Number(this.trad.b.balance);
      const price = Number(this.xjFormMc.price);
      const money = Number(val);

      // 数量的变化
      const number = accDiv(money, price);
      this.xjFormMc.number = toFixed(number, this.trad.coinDecimal);

      let pesent = 0;
      if (blc > 0) {
        pesent = (Number(this.xjFormMc.number) / blc) * 100;
        if (pesent > 100) {
          pesent = 100;
        }
        this.mcpesent = Number(pesent.toFixed(2));
      }
      // this.handleMcInputAction();
    },

    // 卖出的各种输入后执行
    handleMcInputAction() {
      if (this.xjFormMc.money < this.min_exchang_money) { // 清除 错误提示
        this.xjmc_money_iserror = true;
        return
      }
      this.xjmc_money_iserror = false;
    },

    // 下单数量/金额是否超过扣去手续费后的余额 (如IQ币)
    handleOverFlowMoney() {
      const v = this.trad.valuationCoinDecimal; // 计价币种精度
      this.procedures = false;
      const sxf = this.trad.expenseChargeRate; // 币种手续费
      const balance = this.trad.b.balance; // 币种余额
      let n = Number(this.xjFormMc.number); // 用户输入的卖出量
      if (sxf && balance) { // 需要有手续费的币种 并且 余额为0时
        const b = (sxf * n) + n;
        // console.log(b, balance);
        if (b > balance) {
          this.procedures = true; // 显示提示
          // 计算实际额度
          const coinDecimal = this.trad.coinDecimal; // 币种精度
          n = toFixed(balance / (1 + sxf), coinDecimal);
          this.xjFormMc.number = n;
        }
      }
      const price = Number(this.xjFormMc.price);
      const money = toNonExponential(accMul(Number(n), price));
      this.xjFormMc.money = toFixed(money, v);
    },

    // 买入数量控制 至少是 10的(价格精度 - 4)次方
    handleBuyNumberLimit() {
      // const v = this.trad.valuationCoinDecimal; // 计价币种精度
      this.buyNumberLimit = 0;
      const p = this.trad.priceDecimal; // 价格精度
      const num = 10 ** (p - 4);
      if (this.xjFormMr.number < num && num !== 1) {
        this.buyNumberLimit = num;
        // this.xjFormMr.number = num;
        // const money = accMul(Number(this.xjFormMr.price), num);
        // this.xjFormMr.money = toFixed(money, v);
      }
    },

    // 风险提示
    handleRiskTip() {
      const localRiskStatus = localStorage.getItem('riskStatus');
      if (!localRiskStatus) {
        localStorage.setItem('riskStatus', '[]');
      }
      const riskId = this.$store.state.app.trade.id;
      const riskStatus = JSON.parse(localStorage.getItem('riskStatus'));
      const riskBoolean = riskStatus.find(v => riskId === v);
      if (riskBoolean) {
        this.riskTipBoolean = true;
      }
      this.riskHintsVisible = true;
    },
    // 风险提示 -- 回调监听
    handleListenRisk(res) {
      this.riskHintsVisible = res;
    },
    // 跳转cpu
    handleJumpCpu() {
      const language = this.$store.state.app.language;
      if (language === 'zh-CN' || language === 'zh-TW') {
        window.open('https://www.cpubaba.com');
      }
    },
    // 跳转到未登录会员页面
    handleToNoLoggedMember() {
      const scat = this.$store.state.app.scatter;
      if (scat && scat.identity) {
        this.$router.push('/member');
        return;
      }
      this.$router.push('/member-not-logged');
    },
    // listenFreeCpu
    handleFreeCpu(val) {
      if (val === 'toPage') {
        this.handleToNoLoggedMember();
      }
    },
    /*
    * 进度格式化
    * @params numb Number
    * @p 保留小数后几位
    */
    toFixed(numb, p) {
      return toFixed(numb, p);
    },

    // 微调数额精度
    stepFormat(p) {
      return 1 / (10 ** p);
    },

    // 获取钱包的logo
    handleGetWalletLogo() {
      return walletsLogo();
    },

    // 获取VIP - Logo
    handleGetVipLogo() {
      return vipLogo()
    },

    // 获取标准时区
    handleGetTimeGMT() {
      return /GMT[+|-]\d{4}/.exec(new Date())[0];
    },
    // 两数相乘
    handleAccMul(num1, num2) {
      return accMul(num1, num2)
    },

    // 点击盈亏统计
    handleShowProfit() {
      if (!this.$store.state.app.scatter.identity) {
        this.handleWalletPermission('EOS');
      }
    },

    // 即将上架交易对的倒计时
    handleCountdown() {
      if (this.cDate.total <= 0) {
        clearInterval(this.countdownTimer);
        // 倒计时结束
        return;
      }
      // this.endtime = new Date('2018-12-21 19:34:50'); // test time
      this.cDate = countdown(this.endtime);
    },
    // 开始倒计时
    handleCountdownStart() {
      this.countdownTimer = setInterval(() => {
        this.handleCountdown()
      }, 1000);
    },

    handleSelectMenu(val) {
      if (!this.$store.state.app.scatter.identity) {
        this.handleWalletPermission('EOS');
        return;
      }
      // 盈亏统计
      if (val === 1) {
        this.showProfit = true;
      }
      // 持仓统计
      if (val === 2) {
        this.handleRemindSet(0);
      }
      // 跳转到领取CPU页面
      if (val === 3) {
        this.$router.push({
          name: 'getCpu'
        });
      }
    },
    // cpu的百分比值
    listenEosResource(data, cpuPercent) {
      if (data === 'data') {
        if (cpuPercent > 80) {
          this.cpuPercentOver = true;
        } else {
          this.cpuPercentOver = false;
        }
      }
    },
    // EBTC/EETH兑换功能
    handleCurrencyExchange(value) {
      if (!this.$store.state.app.scatter.identity) {
        this.handleWalletPermission('EOS');
        return;
      }
      if (value === 'USDT') {
        this.convert = 'ETH';
        this.usdtCurrencyExchangeVisible = true;
        return;
      }
      this.convert = value;
      this.currencyExchangeVisible = true;
    },
    // 关闭兑换弹窗
    listenCurrencyExchange() {
      this.currencyExchangeVisible = false;
    },
    // 关闭usdt兑换弹窗
    listenUsdtCurrencyExchange() {
      this.usdtCurrencyExchangeVisible = false;
    },
    // 设置行情提醒
    handleRemindSet(val) {
      this.remindSetStatus = val;
      this.remindSetVisible = true;
    },
    // 关闭弹窗
    handleRemind(event, val) {
      if (event === 'added') {
        this.remindSetVisible = val;
        this.remindSetStatus = 1;
      }
    },
    // 打开充提选择窗
    handleOpenCharginChange() {
      if (!this.$store.state.app.scatter.identity) {
        this.handleWalletPermission('EOS');
        return;
      }
      this.charginChangeVisible = true;
    },
    // 充提选择回调
    handleCharginChange(way) {
      // // 充币服务器暂停
      // if (Number(this.$store.state.app.chargingStatus.depositStatus) === 0 && way === 2) {
      //   this.withdrawDialogVisible = true;
      //   return;
      // }
      // // 提币服务器暂停
      // if (Number(this.$store.state.app.chargingStatus.withdrawStatus) === 0 && way === 1) {
      //   this.withdrawDialogVisible = true;
      //   return;
      // }
      this.charginChangeVisible = false;
      this.coin = this.trad.a.name.toUpperCase();
      if (this.trad.a.name.toUpperCase() === 'EOS') {
        this.coin = 'USDT'
      }
      this.handleCoinCharging(way)
    },
    // 充、提币
    handleCoinCharging(way) {
      this.coinChargingVisible = true;
      this.coinChargingWay = way;
    },
    // 充提币回调
    handleCoinChargingVisible(way) {
      if (way === 'close') {
        this.coinChargingVisible = false;
      }
    },
    toNonExponential(num) {
      return toNonExponential(num);
    },
    handleToTrade() {
      this.$router.push({
        path: '/trade/eosio.token-eos-eosdt'
      });
      window.location.reload();
    },
    // 获取等级说明
    handleLevelRule() {
      const level = this.user && this.user.level;
      if (!this.user || (!this.user.level && this.user.level !== 0)) return;
      this.$http.get('/levelRule/list').then((res) => {
        if (res.code !== 0) return;
        this.levelRuleNum = res.ruleList.find(v => level === v.level).freeOrderQuota;
      });
    },
    // 生成usn跳转官网
    handleToWebsite() {
      if (this.trad.b.name === 'USDT') {
        window.open('https://danchor.io');
        return;
      }
      window.open(this.trad.valuationCoinInfo.website);
    },
    // 选择地址薄
    handleCheckAddress(chain) {
      this.addressChain = chain;
      this.addressBookVisible = true;
    },
    // 选择地址回调
    handleAddressBook(type, val) {
      if (type === 'check1') {
        if (val.addressChain.toLowerCase() === 'eos') {
          this.xjFormMc.recipient = val.address;
        } else {
          this.xjFormMr.recipient = val.address;
        }
        this.addressBookVisible = false;
      }
      if (type === 'close') {
        this.addressBookVisible = val;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-color-lv: #67C269;
$-color-ho: #EE1443;
$-color-black: #7b8db9;
$-clolor: #13A0F9;
.litterDelay {
  color: #333 !important;
}
.nodeDelay {
  color: #67c269 !important;
}
.mediumLatency {
  color: #FF9800 !important;
}
.highLatency {
  color: #E51C23 !important;
}

.color-lv {
  color: $-color-lv !important;
}
.color-ho {
  color: $-color-ho !important;
}
.topcolor {
  background: $-topcolorf7;
}

.fontx {
  cursor: pointer;
  color: #333;
}

.cozyTip {
  color: #333;
  padding-right: 10px;
  font-size: 12px;
  cursor: pointer;
  i {
    display: inline-block;
    font-weight: bold;
    // color: #333;
    vertical-align: middle;
    font-size: 16px;
  }

  &:hover {
    color: #278EDA;
    i {
      color: #278EDA;
    }
  }
}
.iconNumber {
  cursor: pointer;
  &:hover {
    color: #606266;
  }
}
.xjmrbox, .xjmcbox {
  width: 315px;
  position: relative;
  max-width: 440px;
  margin: auto;
  font-size: 12px;
  padding: 0px 15px 0px 0;
  margin: 0 auto;
  // flex: 1;
}

.xjmrbox {
  width: 300px;
  padding: 0px 10px 0 0;

  /deep/ .el-form-item--mini.el-form-item {
    margin-bottom: 5px;
  }
}

.xjmcbox {
  /deep/ .el-form-item--mini.el-form-item {
    margin-bottom: 5px;
  }

  .tradeSlowUrl {
    position: absolute;
    top: -23px;
    right: 2px;
    color: #999;
    cursor: pointer;
  }
}

.limitPriceNumber {
  position: relative;
  /deep/ .el-input__inner {
    padding-right: 5px !important;
    -moz-appearance: textfield;
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }

  .formulaTip {
    position: absolute;
    top: 25px;
    left: -29px;
    color: #999;
    cursor: pointer;
  }
}
// 委托提示说明
.formula {
  padding: 5px;
  font-size: 14px;
  p {
    text-align: left;
    line-height: 24px;
    margin-bottom: 20px;
  }
  .formulaContent {
    height: 50px;
    .ramPrice {
      flex: 4;
      text-align: center;
    }
    .ramSign {
      flex: 1;
    }
    div {
      position: relative;
      height: 46px;
      flex: 8;
      flex-direction: column;
      justify-content: space-between;
      em {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 160px;
        height: 1px;
        background: #666;
      }
    }
  }
}

.hideArrow {
  /deep/ .el-input__inner {
    -moz-appearance: textfield;
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
}
// .embed {
//   .xjmrbox, .xjmcbox {
//     width: 445px;
//     max-width: 445px;
//     padding-right: 20px;
//   }
// }

.mrmcbox {
  position: relative;

  &::before {
    content: ' ';
    position: absolute;
    width: 1px;
    height: 80%;
    background: #dedede;
    left: 50.2%;
    top: 50%;
    transform: translateY(-50%);
  }
}

/deep/ .payMask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 100;
  div {
    font-size: 16px;

    p {
      color: #333;
    }

    span {
      display: inline-block;
      padding-top: 30px;
      color: #278EDA;
      cursor: pointer;
    }
  }
}

.el-form-item__error {
  display: none;
}

.el-form-item_account_error {
  position: relative;
  padding: 4px 0 0;
  margin-bottom: -11px;
  display: block;
}

.is-error, .is-error-number {
  margin-bottom: 20px !important;

  .el-form-item__error {
    padding: 5px 0 0;
    display: block;
  }
}
.is-error-number {
  margin-bottom: 10px!important;
}
.riskTip {
  color: #E51C23 !important;
  cursor: pointer;
  span {
    font-size: 15px;
    margin-right: 2px !important;
  }
}

.fontz {
  color: #333;
}
.theme-278EDA {
  .colorHover:hover {
    color: #278EDA !important;
  }
}

.mcbtn, .mrbtn {
  height: 40px;
  font-size: 14px;
}

.mrbtn {
  width: 100%;
  color: #fff;
  background-color: $-color-lv;
  border-color: $-color-lv;
  -webkit-box-shadow: -1px 0 0 0 $-color-lv;
  box-shadow: -1px 0 0 0 $-color-lv;
}
.mcbtn {
  width: 100%;
  color: #fff;
  background-color: $-color-ho;
  border-color: $-color-ho;
  -webkit-box-shadow: -1px 0 0 0 $-color-ho;
  box-shadow: -1px 0 0 0 $-color-ho;
}


.el-button.active {
  color: #fff;
  border-color: $-main-color;
  background-color: $-main-color;
}

.backfix {
  position: absolute;
  top: 2px;
  color: #c0c4cc;
  font-size: 12px;
  right: 38px;
}

.elsildebox {
  position: relative;
  width: 210px;
  margin-left: 5px;

  .el-slider__stop {
    top: 19px;
    cursor: pointer;
  }
}
.pesentNumber {
  margin-top: -13px;

  span {
    flex: 1;
    text-align: right;
    font-size: 12px;
  }

  span:first-child{
    flex: none;
  }
}

.jycenter {
  position: relative;

  /deep/ .el-input--mini {
    .el-input__inner {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      padding-right: 37px;
    }
  }
  .receiveAccount {
    /deep/ .el-input__inner {
      padding-right: 10px !important;
    }
  }
  /deep/ .el-form-item--mini {
    .el-form-item__label {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #333;
    }
  }

  /deep/ .el-input__suffix {
    height: auto;
    line-height: 40px;
    font-size: 13px;
  }

  /deep/ .el-slider__button-wrapper {
    z-index: 9;
  }
}

.trasfStop {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99;
  background: rgba(255, 255, 255, 0.9);

  &.opensell {
    width: 50%;
    text-align: center;

    .opencudown {
      width: 100%;
    }

    .hasopensell {
      position: relative;
      width: 50%;

      .line-bottom {
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: 200px;
        background: rgb(235, 235, 235);
        transform: translateY(-50%);
      }

      span {
        font-size: 16px;
        display: inline-block;
        margin-top: 46px;
        color: #278EDA;
        cursor: pointer;
      }
    }
  }

  &.w100 {
    width: 100%;
    .opencudown {
      width: 50%;
    }
    .hasopensell {
      width: 50%;
    }
  }

  .color-yellow, .color-red {
    font-size: 16px;

    i {
      font-size: 40px;
    }

    p {
      padding: 0;
    }

    margin-bottom: 5px;
  }

  p {
    font-size: 14px;
    padding: 10px 0 0;
  }

  a {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
  }
}

.exchangeTis {
  color: #999;
  text-align: right;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  padding-top: 5px;
}

// dialog 样式
.dialogPay{
  /deep/ .el-dialog{
    background: url('../../../assets/img/wallet/bg-financial.png') no-repeat;
    color: white;
    position: relative;

    .el-icon-close{
      color: white;
    }

    .dialog-logo{
      position: absolute;
      font-size: 30px;
      left: 30px;
      top: 20px;
    }
  }

  /deep/ .el-dialog__body{
    padding: 0px;
  }
}
.riskHintsbox {
  /deep/ .el-dialog__header {
    padding-top: 30px;
  }
  /deep/ .el-dialog__title {
    display: inherit;
    text-align: center;
    font-size: 18px;
    color: #E51C23;
  }
}

.cozyTipBox {
  /deep/ .el-dialog__body {
    padding-top: 10px;
  }

  .scatter{
    text-align: center;
    padding-bottom: 8px;
    margin-top: -10px;
    color: #333;

    .color-f {
      font-size: 20px;
      color:#278EDA;
    }

    p {
      margin-top: 15px;
    }

    .tip{
      padding: 6px;

      .btn{
        width: 25%;
        font-weight: normal;
      }
    }
    .riskAlertCheck {
      margin: 20px 0 10px 0;
    }

    .what{
      overflow: hidden;
      width: 58%;
      margin: 0px auto;

      /deep/ .el-checkbox__label {
        padding-left: 5px;
      }
    }

    .mr200{
      margin-right: 20%;
    }

    .blue{
      color: cornflowerblue;
    }

    .color-999 {
      color: #999;
    }
  }
}
.colorThis {
  color: $-clolor !important;
}
// dialog 样式
.mainView-dialog{
  color: white;
  text-align: center;
  padding-top: 20px;

  .gray {
    margin-top: 5px;
    opacity: 0.8;
    font-size: 12px;
  }

  .accountName{
    padding-top: 5px;
    font-size: 16px;
  }

  .btnDiv{
    margin: 22px 0px;
  }

  .tipOut{
    margin-top: 20px;
    // height: 100px;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    .tip{
      padding: 10px 0px 20px;
      width: 530px;
      margin: auto;

      .tipTop{
        color: #3F99DC;
        padding: 10px 0px;
      }

      .tipContent{
        padding-left: 180px;
        // height: 60px;
        // background: url('../../../assets/img/phone_icon.png') center left no-repeat;

        .buyCurrency {
          margin: 10px 0 5px;
        }

        p {
          text-align: left;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}

.walletCode {
  padding: 10px 0 10px;

  .codebox {
    position: relative;
    width: 240px;
    height: 240px;
    margin: auto;

    .canvasbox {
      width: 100%;
    }

    .logocode {
      padding: 2px;
      position: absolute;
      width: 26px;
      height: 26px;
      left: 50%;
      top: 50%;
      border-radius: 5px;
      background: #fff;
      transform:translate3D(-50%, -50%, 0);
    }

    .overdueCode {
      background: rgba(255, 255, 255, .9);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

      span {
        min-width: 100%;
      }

      a {
        display: block;
      }
    }
  }

  p {
    color: #999;
    padding: 10px 0;
  }

  a {
    color: $-clolor
  }

  .activebox {
    font-size: 12px;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 20px;
    margin: 10px 0 0;
    background: RGBA(255, 239, 239, 1.00);
    color: RGBA(255, 70, 70, 1.00);
  }
}

.relative {
  position: relative;
}

$-remcolor: #8DCEFE;
.remind {display: none}
.remindbox {
  /deep/ .el-input__inner {
    border: 1px solid $-remcolor;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .remind {
    width: 100%;
    position: absolute;
    left: 0;
    line-height: 20px;
    background: $-remcolor;
    z-index: 99;
    padding: 3px 15px;
    font-size: 12px;
    color: #fff;
    display: block;
    i {
      position: absolute;
      right: 5px;
      bottom: 0;
      font-size: 25px;
      cursor: pointer;
    }
  }
}

.vip-box {
  display: flex;
  height: 40px;
  align-items: center;
  justify-items: center;
  justify-content: flex-end;

  span:nth-child(1) {
    line-height: initial;
  }

  img {
    width: 19px;
    vertical-align: bottom;
  }

  .icon-v {
    color: #999;
  }
}

.currencyExchange1 {
  /deep/ .el-dialog__title {
    font-size: 16px !important;
  }
  /deep/ .el-dialog__header {
    padding-top: 30px;
  }
}

.freeCpu {
  position: relative;
  margin-top: 0;
  margin-bottom: -12px;
  align-items: start;

  /deep/ .iconfont1 {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
  }

  /deep/ .cpuHoverTip {
    display: inline-block;
    font-size: 12px;
    margin-left: 6px;
    line-height: 12px;
    margin-right: 6px;
  }
  /deep/ .checkWord {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 3px;
    color: #999;
  }
}

.usnCls {
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;

  img {
    width: 25px;
    margin-right: 3px;
  }

  i {
    color: #fbb34a;
    margin-right: 3px;
  }
}

.addressDialog {
  /deep/ .el-dialog__header {
    padding-top: 30px;
  }

  /deep/ .el-dialog__body {
    padding-top: 10px;
  }
}

.icon-huaban212 {
  display: block;
  width: 30px;
  height: 38px;
  line-height: 38px;
  padding: 0 5px;
  cursor: pointer;
  color: #333;
  background: #fff;
  border-radius: 5px;
}

.addressBookCls {
  overflow: hidden;

  /deep/ .el-input__suffix {
    top: 1px;
    right: 2px;
  }
}

// 黑夜版
.theme-1B1D27 {
  .cpuPercent {
    color: $-color-black;
  }
  .fontx {
    color: $-color-black;
  }
  .delay {
    color: #7b8db9 !important;
  }
  .highLatency {
    color: #E51C23 !important;
  }
  .colorHover {
    color: $-color-black;
    &:hover {
      color: #278EDA !important;
    }
  }
  .trbtable {
    background: none;
  }
  .mrmcbox {
    &::before {
      background: rgba(255, 255, 255, .1);
    }
  }
  .topcolor {
    background: $-topcolor2;
  }

  .tabpane {
    a {
      white-space: nowrap;

      &.active {
        background: $-black1 !important;
        color: #278EDA;
      }
    }
  }

  .exchangeTis {
    color: #7b8db9;
  }
  .trasfStop {
    background: $-black1
  }

  .payMask {
    // background: rgba(0, 0, 0, 0.85);
    background: #152247;
    /deep/ div {
      p {
        color: rgba(197, 206, 228, 1) !important;
      }
    }
  }
  .cozyTip {
    color: #7b8db9 !important;
    &:hover {
      color: #278EDA !important;
      i {
        color: #278EDA !important;
      }
    }
  }
  .cozyTipBox {
    p {
      color: rgba(197, 206, 228, 1) !important;
    }
  }
  .icon-huaban212 {
    cursor: pointer;
    color: #fff;
    background: $-black1;
  }
}

</style>
